How to create a bar that stays on top when scrolli

2019-04-02 19:27发布

站内问答 / JavaScript
604 3 6

I'm trying to create a div that stays fixed on top when a user scrolls down and when he scrolls back up, goes back to the original position.

I need this exact same behaviour that 9gag offers -> http://9gag.com/gag/293756

Thanks!

3条回答
闹够了就滚
2楼-- · 2019-04-02 19:49

Do the following:

  1. Create a scroll event handler on the $(window).
  2. In this event handler, check if the user has scrolled lower than the top of the element you always want in view. You can use offest and scrollTop methods to do this.
  3. If yes, set the element to position: fixed with top: 0. You may also need to adjust the left attribute, depending on your layout.
  4. If no, set the element to position: static.
查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
3楼-- · 2019-04-02 19:50

Use the Jquery Waypoints plugin: http://imakewebthings.github.com/jquery-waypoints/

Extremely easy to implement.

查看更多
0人赞 添加讨论(0) 举报
够拽才男人
4楼-- · 2019-04-02 19:57

The code that creates exactly the same behavior as 9gag.com:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- tags html, header, body, divs, anything -->

<div id="post-control-bar" class="spread-bar-wrap">
    <div class="spread-bar" style="width:600px">
        Facebook button, Twitter button, anything...
    </div>
</div>

<script type="text/javascript">
window.onscroll = function()
{
    if( window.XMLHttpRequest ) {
        if (document.documentElement.scrollTop > 173 || self.pageYOffset > 173) {
            $('post-control-bar').style.position = 'fixed';
            $('post-control-bar').style.top = '0';
        } else if (document.documentElement.scrollTop < 173 || self.pageYOffset < 173) {
            $('post-control-bar').style.position = 'absolute';
            $('post-control-bar').style.top = '';
        }
    }
}
</script>

<!-- content, footer, anything -->
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)