Fix object to top of browser window when scrolling

前端未结

关注

 7  765

I saw recently a new interesting feature in the new gmail and also in the HTML5 bing preview that fixes a navigation bar to the top of the browser window when scrolling. The

相关标签:

7条回答

粉色の甜心

2020-12-04 17:19
Use:
```
#element {
  position: fixed;
  right: 200px;
  top: 200px;
}
```
"fixed" means the element is positioned relative to the browser window.
0 讨论(0)
发布评论:

提交评论
- 加载中...
我在风中等你

2020-12-04 17:23

If you want the element to start further down on the page, then stay fixed on the top as you scroll down, this may be a good start:

http://jsfiddle.net/cc48t/

0 讨论(0)
发布评论:

提交评论
- 加载中...

暗喜

2020-12-04 17:34

If browser supports "position:fixed" next plain javascript example is more fast:

<html>
<head>
<style>
html,body {
  margin: 0;
}
#navbar.navbar_fixed {
  position:fixed;
  top:0px;
  width:100%;
  height:100px;
  background-color:#f00;
}
#navbar.navbar_absolute {
  position:absolute;
  top:100px;
  width:100%;
  height:100px;
  background-color:#f00;
}
</style>
<script type="text/javascript">

function window_onload() {
  window.addEventListener("scroll",navbar_reset_top,false);
}

var navbar_top=100;

function navbar_reset_top() {
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
  if(scrollTop>navbar_top&&navbar.className==="navbar_absolute") {
    document.getElementById("navbar").className="navbar_fixed";
  }
  else if(scrollTop<navbar_top&&navbar.className==="navbar_fixed") {
    document.getElementById("navbar").className="navbar_absolute";
  }
}

</script>
</head>
<body onload="javascript:window_onload();">
<div id="navbar" class="navbar_absolute">Navigation Bar</div>
<div style="height:2000px;background-color:#ff0;">Content</div>
</body>
</html>

0 讨论(0)

情深已故

2020-12-04 17:36

You can do it something like this :

Example

css

body {
    height: 3000px;
    top: 0;

}
#image {
    width: 100%;
    background: #444;
    height: 50px;
}
#scroller{
    height:100px;
    background:#ccc;
}
.stuck{
    position:fixed;
    z-index:100;
    width:100%;
    top:0;
}

script

$(window).scroll(function() {
                if ($(window).scrollTop() > 50) {
                    $('#scroller').addClass('stuck');
                } else {
                    $('#scroller').removeClass('stuck');
                }

            });

after scroll 50 px it will change the css of scroller.

this may be a good start

0 讨论(0)

北海茫月

2020-12-04 17:37

Rather then defining the scroll lenght, why can't we define the object's position? say once it reaches top:0 then trigger the script. This way it will be more device friendly.

0 讨论(0)
发布评论:

提交评论
- 加载中...

长发绾君心

2020-12-04 17:38

I know this post it's a bit old, but still very usefull.. i just wanted to add a jquery version (a little bit cleaner and configurable), but it's a modified version of the Andrew D. answer.

In this case i don't have two classes, instead i have an relative positioned div and when i reach a certain point (max_scroll) i add a class to the object, and that class is what makes it float

Below is the javascript (all done inside de document ready function)

<script type="text/javascript">
var max_scroll = 400; // this is the scroll position to start positioning the nav in a fixed way
$(document).ready(function(){

        $(window).scroll(function () {
        var navbar = $(".filterbutton");

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop > max_scroll && !navbar.is(".filterbuttonFixed")) {
                navbar.addClass("filterbuttonFixed");
                // console.log("go floated");
        }
        else if(scrollTop < max_scroll && navbar.is(".filterbuttonFixed") ) {
                // console.log("return to normal");
                navbar.removeClass("filterbuttonFixed");
        }

}
});

</script>

and this is my nav-bar container div

<div id="floatable-nav-bar" class="my-relative-position-class">
    <nav class="page-menu">
        <ul class="scroll-nav">
            <li><a class="selected" href="#first">Section 1</a></li>
            <li><a class="" href="#second">Section 2</a></li>
            <li><a class="" href="#third">Section 3</a></li>
            <li><a class="" href="#fourth">Section 4</a></li>
        </ul>
    </nav>
</div>

and last but not least, my nav-floated style

#floatable-nav-bar.nav_floated {
    position:fixed;
    top:1px;
    left: 0;
    width:100%;
    text-align: center;
    background: #EEE;
    padding: 5px 0;
}

I know this isn't the simplest example, but for jQuery users maybe this is a simpler approach, and i think it's better to just add and remove one class (at least it was for me).

0 讨论(0)

1 2 下一页