javascript - 如何延迟我的 float ShareBar 直到用户向下滚动页面

标签 javascript jquery floating searchbar

我已经完成了这里的一些教程,但仍然无法解决我的问题,因此我发布了这个。

我想知道你是否可以告诉我如何获得我的 float 分享栏 @ http://www.patchworkoftips.com/blackberry-messenger-voip-voice-calls/1983/仅当用户向下滚动页面 100px 或文章中途时才显示。

这是我的分享栏 CSS:

#search_bar {
    z-index: 1000;
    position: fixed !important;
    top: 0;
    width: 1082px;
    color: #FFF;
    background: #333;
    padding-top: 1px;
    padding-bottom: 1px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

抱歉,我无法粘贴共享栏代码,因为它一直在此处消失。

我是使用 javascript 和 jquery 的新手,因此非常感谢复制和粘贴解决方案。

最佳答案

$(window).on('scroll', function(){
    if($(window).scrollTop() > 100){ // The '100' can be set to what ever pixel height you want
         $('#search_bar').fadeIn('500'); // This shows the share bar
    }else{
         $('#search_bar').fadeOut('500'); // This hides the share bar
    }
});

关于javascript - 如何延迟我的 float ShareBar 直到用户向下滚动页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13404529/

相关文章:

jQuery 按钮点击不会运行

javascript - 在 Document.ready 上调用函数的测试用例

javascript - 为什么 JSF 提供文件扩展名为 .jsf 且 GET 参数 ln=js 的 JavaScript 资源?

javascript - 模拟图像 alt 属性的行为

php - JQuery 和 PHP 独特的聊天窗口为每个用户和数据库保存聊天记录

html - 在 HTML 中从右开始显示内联列表 (li)

html - 了解 div 的行为和

html - 李 :hover grows in width inside floating wrapper

javascript - jQuery/JavaScript : Check if number is greater than another number by a minimum amount

javascript - 带有 ajax 请求的空响应正文