Question

我遇到了jquery函数的问题。你可以在这里看到一个有效的演示 - http://dev.sreejesh.in/menuissue/。正如您可以看到当用户向下滚动到页面时，我已经编写了一个jQuery函数（它将在滚动时移动）以检查滚动像素。当浏览器滚动到某个像素（侧面菜单块的高度）时，菜单块将保持固定状态。其余内容正常滚动。

该功能现在正在运行，但问题是当此功能运行时，menublocks跳转。我认为这是因为运行该功能的延迟。希望你们有任何好办法解决这个问题。

我使用了if / else函数来检查滚动像素，所以当滚动像素大于menublock height时，它会添加一个“固定”类。

我使用以下代码。

HTML

<div id="globalwrapper">
    <div id="menubar">
       ---- Menu List items-----
    </div>
    <div id="mainblock">
        ----Main content area----
    </div>
</div>

的jQuery

$(document).ready(function(){
    $(window).scroll(function() {
       adjustScroll();
    });
});

function adjustScroll(){
    var windowHeight = $(window).height();
    var menublockHeight = $('#menubar').height();
    var scrollValue = $(document).scrollTop();
    var posValue = menublockHeight - windowHeight;

    var menuStatus = $('#menubar').css('left');

    $('#menubar').css('minHeight', windowHeight);
    $('#menubar').css('height', menublockHeight);

    console.log(menuStatus);

    $(document).scroll(function() {
        if(menuStatus == '0px') {
            if(scrollValue > posValue){
                $('#menubar').addClass('fixed');
                $('#menubar').css('marginTop', -posValue);
            }else {
                $('#menubar').removeClass('fixed');
                $('#menubar').css('marginTop', '0px');
            }
        }
    });
}

Answer 1

我认为只有CSS可以解决这个问题，添加这种风格：

#menubar{
    position: fixed;
}

只需在Google Chrome上进行测试，即可试一试。

jQuery - 在窗口滚动上运行一个没有任何延迟的函数

1 个答案: