JQuery में परीक्षण यदि कोई तत्व स्क्रीन के शीर्ष पर है

Question

मेरे पास div है जो ब्राउज़र विंडो के शीर्ष से लगभग 100px स्थित है। जब उपयोगकर्ता नीचे स्क्रॉल करता है, तो मैं div चाहता हूं जहां यह तक रहता है, यह स्क्रीन के शीर्ष तक पहुंचता है। फिर, मैं कुछ सीएसएस को JQuery के साथ बदल सकता हूं ताकि स्थिति को निश्चित और मार्जिन-टॉप पर बदल दिया जा सके। यदि मैं div स्क्रीन के शीर्ष पर हूं तो मैं JQuery में कैसे परीक्षण कर सकता हूं?

Answer 1

var distance = $('div').offset().top, 
    $window = $(window); 

$window.scroll(function() { 
    if ($window.scrollTop() >= distance) { 
     // Your div has reached the top 
    } 
}); 

पीएस बेहतर प्रदर्शन के लिए, आपको शायद स्क्रॉल ईवेंट हैंडलर को थ्रॉटल करना चाहिए।
जॉन रेसिग का आलेख देखें: Learning from Twitter।

Answer 2

इतना जवाब नहीं है, लेकिन किसी और के लिए सहायक हो सकता है। ऊपर दिए गए स्वीकृत उत्तर का उपयोग करना और 'ट्विटर से सीखना' लिंक का संदर्भ देना (धन्यवाद @ जोसेफ सिब्बलर) मैं निम्नलिखित के साथ आया था।

मैं अपने प्राथमिक नेविगेशन के लिए Twitter Bootstrap Navbar का उपयोग कर रहा हूं। इसमें megamenu की एक आईडी है।

मेरे पास मेरे पृष्ठ पर 'लॉगिन' बटन भी है, जब क्लिक किया गया है, तो लॉगिन फॉर्म को प्रकट करने के लिए नेविबार और नीचे दी गई सभी सामग्री को नीचे स्लाइड करें। तो क्या? खैर, अब मेरी navbar की स्थिति बदल गई है और यदि मैं उस स्थिति को अद्यतन नहीं करता हूं, जब मैं navbar स्क्रॉल करता हूं तो ब्राउज़र के शीर्ष तक उड़ जाएगा - भले ही यह वास्तव में शीर्ष पर न हो।

मैं नेविबार स्थिति को अपडेट करने के लिए इसके साथ आया ताकि यदि कोई उपयोगकर्ता 'लॉगिन' पर क्लिक करता है और फिर स्क्रॉल करता है, तो navbar स्वयं को शीर्ष पर ठीक से ठीक कर देगा।

logincollapse मेरा कंटेनर div है जो login बटन क्लिक होने तक लॉगिन फ़ॉर्म और अन्य छिपी हुई सामग्री रखता है।

मुझे यकीन है कि सुधार के लिए जगह है - इसलिए कृपया मुझे सही करें, मैं तदनुसार अपडेट करूंगा।

jQuery

var did_scroll = false, 
    $window = $(window), 
    megamenu_distance = $('#megamenu').offset().top; // The default position of the navbar 

$('#logincollapse').slideToggle(300, 'easeInOutQuint', function() { 
    megamenu_distance = $('#megamenu').position().top; // Updated position of the navbar 
    .... 
}); 

$window.scroll(function (event) { 
    did_scroll = true; 
}); 

setInterval(function() { 
    if (did_scroll) 
    { 
     did_scroll = false; 

     if ($window.scrollTop() >= megamenu_distance) 
     { 
      $('#megamenu').addClass('navbar-fixed-top'); 
     } 
     else 
     { 
      $('#megamenu').removeClass('navbar-fixed-top'); 
     } 
    } 
}, 250); 

Answer 3

जब आप शीर्ष लेख है। और फिर एक तरफ बार।

जावास्क्रिप्ट:, बार अलग फिक्सिंग जब यह स्क्रीन के शीर्ष पर है के लिए

var scroll_happened = false; 
var aside_from_top = $('aside').offset().top; 
$window = $(window); 

$window.scroll(function() 
{ 
    scroll_happened = true; 
}); 

setInterval(function() 
{ 
    if(scroll_happened == true) 
    { 
     scroll_happened = false; 
     if($window.scrollTop() >= aside_from_top) 
     { 
      $('#aside_container').addClass('fixed_aside'); 
     } 
     else 
     { 
      $('#aside_container').removeClass('fixed_aside'); 
     } 
    } 
} , 250); 

Css:

.fixed_aside 
{ 
    position: fixed; 
    top: 0; 
    bottom: 0; 
} 

एचटीएमएल:

<aside> 
    <div id="aside_container"> 
     <section> 
     </section> 
     <section> 
     </section> 
     <section> 
     </section> 
    </div> 
</aside> 

Answer 4

हे आप की तरह कर सकते हैं यह:

var distance = $('.yourclass').offset().top; 
 

 
$(window).scroll(function() { 
 
    if ($(this).scrollTop() >= distance) { 
 
     console.log('is in top'); 
 
    } else { 
 
     console.log('is not in top'); 
 
    } 
 
});

Answer 5

$(document).ready(function(){ 
    var $doc   = $(document); 
    var position  = 0; 
    var top = $doc.scrollTop();   // 현재 스크롤바 위치 
    var screenSize  = 0;    // 화면크기 
    var halfScreenSize = 0;    // 화면의 반 

    /* 사용자 설정 값 시작 */ 
    var pageWidth  = 1000;   // 페이지 폭, 단위:px 
    var leftOffet  = 409;   // 중앙에서의 폭(왼쪽 -, 오른쪽 +), 단위:px 
    var leftMargin  = 909;   // 페이지 폭보다 화면이 작을때 옵셋, 단위:px, leftOffet과 pageWidth의 반만큼 차이가 난다. 
    var speed   = 1500;   // 따라다닐 속도 : "slow", "normal", or "fast" or numeric(단위:msec) 
    var easing   = 'swing';  // 따라다니는 방법 기본 두가지 linear, swing 
    var $layer   = $('#quick'); // 레이어 셀렉팅 
    var layerTopOffset = 140;   // 레이어 높이 상한선, 단위:px 
    $layer.css('z-index', 10);   // 레이어 z-인덱스 
    /* 사용자 설정 값 끝 */ 

    // 좌우 값을 설정하기 위한 함수 
    function resetXPosition() 
    { 
     $screenSize = $('#contact').width();   // 화면크기 
     halfScreenSize = $screenSize/2;    // 화면의 반 
     xPosition = halfScreenSize + leftOffet; 
     if ($screenSize < pageWidth) 
      xPosition = leftMargin; 
     $layer.css('left', xPosition); 
    } 


    // 스크롤 바를 내린 상태에서 리프레시 했을 경우를 위해 
    if (top > 0) 
     $doc.scrollTop(layerTopOffset+top); 
    else 
     $doc.scrollTop(0); 

    // 최초 레이어가 있을 자리 세팅 
    $layer.css('top',layerTopOffset); 
    resetXPosition(); 

    // 윈도우 크기 변경 이벤트가 발생하면 
    $(window).resize(resetXPosition); 

    // 스크롤이벤트가 발생하면 
    $(window).scroll(function(){ 
     yPosition = $doc.scrollTop() + layerTopOffset; 
     $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false}); 
    }); 
});