javascript - 响应 Div 滚动

标签 javascript jquery css html

我正在尝试复制 Nike's Website 上的 float 搜索选项栏.看起来它的位置在滚动到足以到达选项栏底部时固定在底部,而当向上滚动到达选项栏顶部时它的位置固定在顶部。

我确信这是一个简单的 jquery 脚本,但作为一个新手,我一直无法弄清楚这是如何完成的。

这是我正在使用的 jQuery 脚本:

google.load("jquery", "1");

function sticky_relocate() {

    var window_top = $(window).scrollTop();

    var div_top = $('#sticky-anchor').offset().top;

    if (window_top > div_top)    
        $('#sticky').addClass('stick')
    else    
        $('#sticky').removeClass('stick');

}

google.setOnLoadCallback(function() {

    $(window).scroll(sticky_relocate);    
    sticky_relocate();

});

感谢您的帮助!

最佳答案

看起来很简单,当您滚动时检查它是向上还是向下。

如果它正在下降,那么让它随着页面滚动,直到它到达底部,然后固定位置。

如果你要往上走,基本上做同样的事情。滚动页面直到到达顶部,然后它会停留。

您是否尝试过为此编写代码? 另外,您能否发布您的页面源代码,以便我也可以尝试对其进行编码?

关于javascript - 响应 Div 滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13774339/

相关文章:

html - 为下一个可用元素使用 CSS 选择器

html - 如何在ReactJS中的图像上添加文本?

javascript - Set对象如何清除数组中的所有重复项以及什么是常规和多重集?

javascript - 在 Observable 中使用 Promise

javascript - 我可以将 select2 纯粹用作分词器,禁用下拉/搜索/匹配功能吗?

asp.net - 为什么同域ajax请求添加jsonp回调参数?

javascript - 将子菜单置于相关父菜单下

php - 从我之前的页面加载中自动选择复选框

javascript - 将多个 Javascript 对象连接成一个对象

CSS calc 适用于 vh 但不适用于 %