【问题标题】:How To Delay My Floating ShareBar Till User Scrolls Down Page如何延迟我的浮动 ShareBar 直到用户向下滚动页面
【发布时间】:2012-11-15 19:16:16
【问题描述】:

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

我想知道你能否告诉我如何让我的浮动共享栏@http://www.patchworkoftips.com/blackberry-messenger-voip-voice-calls/1983/ 仅在用户向下滚动页面的 100 像素或进入文章一半时才显示。

这是我的共享栏 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 的新手,因此非常感谢复制和粘贴解决方案。

【问题讨论】:

  • 它消失了?请将其粘贴到gist.github.com 或类似网站上,然后在此处发布链接。我们将在此处发布。
  • 给你 UdegbunamChuks... 见下文

标签: javascript jquery floating searchbar


【解决方案1】:
$(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
    }
});

【讨论】:

  • @马达拉:谢谢。这是共享条码的链接:gist.github.com/4085257
  • 感谢您的代码,但如何将其添加到页面中?我将它添加到functions.php还是什么?共享条码在我的 footer.php 中。
  • 顺便说一句,我尝试将代码添加到我的 function.php 但不断收到语法错误
  • 我刚刚发现它必须放在 header.php 中,它似乎工作但不是 100%。第一次加载页面时,共享栏是可见的,但是当我向下滚动时,它会消失并稍后重新出现。之后,当我滚动回顶部时,它不会再次显示,直到我向下滚动 100 像素。我猜这是 CSS 问题吧?
  • @UdegbunamChuks 是的,确保共享栏的初始状态显示:无; :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-09-03
  • 1970-01-01
  • 2022-11-05
  • 2021-09-29
  • 2019-06-12
  • 1970-01-01
相关资源
最近更新 更多