滚动时将对象固定在浏览器窗口顶部

我最近在新gmail中看到了一个新的有趣功能，并且在滚动时将导航栏修正到浏览器窗口顶部的HTML5 bing预览中。该栏可能会在页面下方开始100px，但是当您滚动并且它到达浏览器窗口的顶部时，它会在那里修复，直到您在原始位置的上方滚动回来。滚动时将对象固定在浏览器窗口顶部

我的问题是;我怎么能做到这个效果呢或者做一些类似于这个效果的东西？

我希望你能理解我的问题以及我想要描述的内容。

来源

2011-08-08 Cosmo Posmo

如果你想要的元素，以进一步下跌的页面上开始，然后保持固定在顶部，你向下滚动，这可能是一个良好的开端：

http://jsfiddle.net/cc48t/

来源

2011-08-08 10:53:57

这个解决方案在每个浏览器中都非常闪烁。大多数现代浏览器都支持'position：fixed'，这是一种烘焙CSS的方式。 – sohtimsso1970

是的，我不再使用这个解决方案。那是基于我当时设置固定位置的知识有限。使用position：fixed的解决方案更好。 –

使用：

#element { 
    position: fixed; 
    right: 200px; 
    top: 200px; 
}

“固定” 是指该元件相对于浏览器窗口的位置。

来源

2011-08-08 10:36:56 Fasani

通过div的位置设置为position:fixed

来源

2011-08-08 10:38:27

如果浏览器支持 “的位置是：固定的” 下一个普通的JavaScript的例子是更快速的：

<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>

来源

2011-08-08 11:37:33

这是一个更好的解决方案，因为它消除了另一个建议的闪烁，这个建议不断地在每个卷轴上重新定位。 –

I K现在这篇文章有点老了，但仍然非常有用..我只是想添加一个jQuery版本（有点清洁和可配置），但它是安德鲁四答案的修改版本。

在这种情况下我没有两个类，代替我有一个相对定位的div，当我达到一定点（max_scroll）I A类添加到对象，并且该类别是什么使得它浮

下面是JavaScript（DE文件准备函数内全部完成）

<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>

，这是我的导航栏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>

以及最后但并非最不重要的，我资产净值浮动的风格

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

我知道这不是最简单的例子，但对jQuery的用户也许这是一个简单的方法，我认为这是最好只添加和删除一个类（至少它是我）。

来源

2012-07-16 23:04:11 polloss

轻微的建议：可以使用'max_scroll = $（“＃floatable-nav-bar”）。position（）。top'）而不是'max_scroll = 450'。这样，导航栏会在到达顶部时自动浮动（以及使用jQuery为浏览器之间的任何细微变化查找顶部偏移量帐户）。 –

我喜欢在同一时间为身体添加一个类，以便添加顶部填充所固定的元素的高度，以便页面不会跳动，并且滚动非常平滑 '$（'body '）.addClass（“FixedElementOffset”）;' – Nickfmc

你可以做这样的事情：

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; 
}

脚本

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

      });

后滚动50 PX它将改变滚轮的CSS。

这可能是一个良好的开端

来源

2015-02-24 08:32:27 Nileshd

而是然后定义滚动lenght，为什么我们不能定义对象的位置？说一旦它达到顶部：0然后触发脚本。这样它会更加友好。

来源

2015-09-05 13:08:34

我不认为这真的回答了这个问题。他没有问过“定义卷轴长度”（不管这意味着什么？）他问他如何拥有一个固定的头部。 – dman2306

滚动时将对象固定在浏览器窗口顶部

回答

相关问题