Question

我有一个div位于浏览器窗口顶部约100px处。当用户向下滚动时，我希望div保持在的位置，直到到达屏幕顶部。然后，我将使用JQuery更改一些CSS以使位置更改为固定，并将margin-top设置为0.如果此div位于屏幕顶部，我如何在JQuery中测试？

Answer 1

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

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

P.S。为了获得更好的性能，您应该限制滚动事件处理程序查看John Resig的文章：Learning from Twitter。

Answer 2

嘿，你可以这样做：

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 3

不是一个答案，但可能对其他人有所帮助。使用上面接受的答案并参考“从Twitter学习”链接（谢谢@Joseph Sibler）我想出了以下内容。

我使用Twitter Bootstrap Navbar进行主导航。它的ID为megamenu。

我的页面上还有一个“登录”按钮，点击该按钮后，滑动导航栏及其下方的所有内容以显示登录表单。所以呢？好吧，现在我的导航栏的位置发生了变化，如果我不更新那个位置，当我滚动时，导航栏将飞到浏览器的顶部 - 即使它不是真的在顶部。

我想出了这个来更新导航栏位置，因此如果用户点击“登录”然后滚动，导航栏就会正确地将自己固定在顶部。

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 4

当你有标题时。然后放在一边吧。当它位于屏幕顶部时，用于固定吧：

使用Javascript：

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;
}

HTML：

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

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});  
    });  
});

如果元素位于屏幕顶部，则在JQuery中进行测试

5 个答案: