उदाहरण के लिए तीसरे अनुच्छेद पर स्क्रॉल करते समय चिपचिपा शीर्षलेख कैसे निकालें? या पृष्ठ में एक विशिष्ट वस्तु? यह नीचे दिया गया कोड है। https://www.w3schools.com/howto/howto_js_sticky_header.asp

-2
FZEUS 17 जिंदा 2021, 14:08

1 उत्तर

सबसे बढ़िया उत्तर

कहते हैं कि आप p5 के बाद स्टिकी हेडर को हटाना चाहते हैं, आप इसे इस तरह कर सकते हैं

window.addEventListener('scroll', () => {
            const p5 = document.getElementById('p5')
            const nav = document.querySelector('.nav')
            var top = p5.getBoundingClientRect().top
            if (top < 126 || top >270 ) {
                nav.style.position = 'relative'
            } else {
                nav.style.position = 'sticky'
            }
        })
.nav {
        position: relative;
        top: 0;
        background-color: yellow;
        padding: 50px;
        font-size: 20px;
    }
    
    p {
        margin-bottom: 5rem;
    }
    
    .p5 {
        background-color: blue;
    }
    
    #p3 {
        background-color: greenyellow;
    }
<div class="nav">
        hi nav bar
    </div>
    <div class="p">
        <p id="p1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?

        </p>
        <p id="p2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?

        </p>
        <p id="p3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?

        </p>
        <p id="p4">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?

        </p>
        <p class='p5' id="p5">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?

        </p>
        <p id="p6">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?

        </p>
        <p id="p7">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?

        </p>
        <p id="p8">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?

        </p>
        <p id="p9">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?

        </p>
        <p id="p10">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?

        </p>
        <p id="p11">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?

        </p>
        <p id="p12">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?

        </p>
        <p id="p13">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?

        </p>
    </div>

आप अपनी वेबसाइट के आधार पर सही समय पाने के लिए शीर्ष मूल्य बदल सकते हैं

if (top < 126)
0
Mohamed Ghoneim 23 जिंदा 2021, 14:17