जब उपयोगकर्ता पृष्ठ के नीचे पहुंचता है तो div को कैसे दिखाया जाए?

जब उपयोगकर्ता पृष्ठ के निचले भाग तक स्क्रॉल करता है तो मैं निश्चित रूप से jQuery के साथ कुछ div दिखाना चाहता हूं। और यदि उपयोगकर्ता शीर्ष पर वापस स्क्रॉल करता है, तो div बाहर फीका होता है। तो व्यूपोर्ट गणना करने के लिए :)जब उपयोगकर्ता पृष्ठ के नीचे पहुंचता है तो div को कैसे दिखाया जाए?

स्रोत

2010-05-04 Kenan

क्या आप एक div के बारे में बात कर रहे हैं जिसमें एक स्थिति होगी: निश्चित; या एक div जो सामग्री के नीचे बस है? – codedude

यह पृष्ठ के निचले हिस्से में निश्चित स्थिति होगी, शायद "नीचे: 50 पीएक्स" – Kenan

यह मिल जाना चाहिए कि आप आरंभ:

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2768264</title> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $(window).scroll(function() { 
        if ($('body').height() <= ($(window).height() + $(window).scrollTop())) { 
         alert('Bottom reached!'); 
        } 
       }); 
      });  
     </script> 
     <style> 
      body { margin: 0; } 
     </style> 
    </head> 
    <body> 
     <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
     <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
     <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
     <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
    </body> 
</html>

इसमें यह माना जाता body0 के margin है। अन्यथा आपको $('body').height() पर शीर्ष और निचला मार्जिन जोड़ना होगा।

स्रोत

2010-05-04 20:10:33 BalusC

धन्यवाद लेकिन यह काम नहीं करता है :( – Kenan

क्या आपने मार्जिन की जांच की? मैंने एसएससीसीई को शामिल करने के लिए उत्तर अपडेट किया। – BalusC

हाँ, मार्जिन 0 है, मैं सीएसएस रीसेट का उपयोग कर रहा हूं। और मैं भी jQuery 1.3.2 का उपयोग कर रहा हूं? – Kenan

$ (दस्तावेज़) धन्यवाद (या जो भी सही नाम है)। scrollTop() आपको स्क्रॉलबार की स्थिति देनी चाहिए। आप दस्तावेज़ की ऊंचाई के खिलाफ जांचते हैं। फिर div में बाहर या बाहर फीका।

स्रोत

2010-05-04 19:52:16

यहाँ BalusC के कोड पर एक छोटे से संपादित करें यदि आप एक div नहीं एक जावास्क्रिप्ट पॉपअप दिखाना चाहते हैं:

$(window).scroll(function() { 
    if ($(document).height() <= ($(window).height() + $(window).scrollTop())) { 
     //Bottom Reached 
    } 
});

मैं इस का उपयोग करें क्योंकि मेरे पास है:

<head> 
    <title>SO question 2768264</title> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $(window).scroll(function() { 
       if ($("body").height() <= ($(window).height() + $(window).scrollTop())) { 
        $("#hi").css("display","block"); 
       }else { 
        $("#hi").css("display","none"); 
       } 
      }); 
     }); 
    </script> 
    <style> 
     body { margin: 0; } 
     #hi { 
      background: red; color: #FFF; position: fixed; bottom: 0px; right: 0px; display: none; 
     } 


    </style> 
</head> 
<body> 
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 
    <p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p 

    <div id="hi">HIIIIIIIIIIII</div> 
</body>

स्रोत

2012-03-20 03:18:21

हाय। मान लें कि "बॉडी" के बजाय मैं एक div आईडी का उपयोग कर रहा हूं और क्या होगा यदि मैं "हाय" दिखाना चाहता हूं, जब मैं स्क्रॉल किए गए div के 80% पर हूं, उदाहरण के लिए? :) वोट देना एक अच्छा जवाब देगा :) –

आप निम्न का उपयोग कर सकते

body { 
    height:100%; 
}

आशा इस मदद करता है

स्रोत

2013-03-21 20:17:05

धन्यवाद, मैं बिल्कुल उसी मामले में था। आपका समाधान मेरे लिए काम किया! – Adrien

@Adrien आप मेरे दोस्त का स्वागत करते हैं। मैं खुशी से मदद कर सकता है :) –

जब उपयोगकर्ता पृष्ठ के नीचे पहुंचता है तो div को कैसे दिखाया जाए?

उत्तर

संबंधित मुद्दे