如何在使用位置时制作固定菜单/侧边栏：相对？

Question

我想制作一个可以向下滚动的相对 div，直到它到达页面顶部，然后 div 应该固定并保持在顶部，直到页面再次向上滚动。也许我应该使用 jquery？！

这些是我的代码。 名为 .sidebar 的 div 是我想要在滚动时修复的那个！ 我展示了更多的 div 和 css 样式来向大家展示它是怎样的。这是它的样子：http://imagizer.imageshack.us/a/img841/5807/pjpj.png

<div id="header" class="container">

<div id="navbar">


        <div id="menu">
            <ul><h2>
                <li><a href="#" accesskey="3" title="contact">contact</a></li>
                <li><img src="images/icon_triangle.jpg"></li>
                <li><a href="portfolio.html" accesskey="4" title="portfolio">portfolio</a></li>
                <li><img src="images/icon_triangle.jpg"></li>
                <li><a href="#" accesskey="5" title="about">about</a></li>
                <li><img src="images/icon_triangle.jpg"></li>
                <li><a href="index.html" accesskey="6" title="home">home</a></li>
                </h2>
            </ul>
        </div>
        </div>
    </div>

<div id="content">

<h7>HappyDays</h7><br /><br />
<h5>Webdesign</h5>
<h4>Made in Photo</h4><br /><br />
<h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor mattis ornare. Ut semper sem nec justo adipiscing ullamcorper. Nullam sit amet lacus et arcu vestibulum volutpat. Cras mi lectus, consequat quis pretium eu, sodales vitae velit. Donec imperdiet quis urna at egestas. Curabitur in libero commodo est hendrerit condimentum. In hac habitasse platea dictumst. Ut posuere, purus nec convallis lobortis, neque est ornare felis, ut iaculis nulla erat sed diam. Cras non leo libero.</p></h4><br /><br />  


<a rel="prettyPhoto" href="images/cocktail.jpg"><img src="images/images/cocktail.jpg" style="width: 50%; float: left;"></a>



</div>



<div class="sidebar">
            <ul>
                <li><a href="portfolio.html" accesskey="3"><img src="images/icon_triangle_all.jpg" width="80%"><br /><br /><h6>All</h6></a></li>
                <li><a href="#" accesskey="4" title="portfolio"><img src="images/icon_triangle_previous.jpg"  width="30%"><br /><br /><h6>Previous</h6></a></li>
                <li><a href="#" accesskey="5"><img src="images/icon_triangle_next.jpg"  width="50%"><br /><br /><h6>Next</h6></a></li>
            </ul>
<div class="line2"></div>
 </div>   

现在的 CSS！

#menu
    {
    height: 50px;
    padding: 0 13em;
    position: fixed;
    top: 0.5%;
    width: 50%;
    word-spacing:30px;
    z-index:999;
    }




#navbar 
    {
        background:#fff;
        height:5%;
        width:100%;
        bottom: auto !important;
        margin: 0 !important;
        position: fixed !important;
        top: 0;
        border-bottom: 1px solid #a7a7a7;
        z-index:999;

        }
 #content {
    background: none repeat scroll 0 0 #FFFFFF;
   position: relative;  
    font-size: 14px;
    line-height: 25px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
     width: 66.667%;

 }

.sidebar    
    {
    float:right;
    position:relative;
    width: 50%;
    z-index:999;    
    text-decoration:none;


    }

    .sidebar li {

    display: inline-block;
    list-style-type: none;
     -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;

    }

Answer 1

我是您链接到的网站的开发人员之一，Fixate。

目前，jQuery 的一些实现将是最好的选择。这是一个很难解决的问题 - 您需要很好地了解 JS 和 CSS 布局基础知识。

有一个position: sticky; 属性可以让您执行此操作once all browsers support it。细丝组有一个 polyfill 可能有用，但我不确定它在响应项目上的表现如何。

在那之前，您必须选择以下之一：

1. js 中的硬编码值，如@manu 所示。

2.对插件使用动态方法。

jQuery stickToTop（无耻插件）

我们构建了一个 jQuery 插件，jQuery sticktotop，它可以在您无需知道滚动高度的情况下解决问题。

例如，在 jQuery 之后包含它，然后在您的主 js 文件或页面上的脚本标记中初始化stickToTop：

// make the element with the class .js-sticky-menu sticky if window is > 480px
$('.js-sticky-menu').stickToTop({minWindowWidth: 480);

LIVE DEMO

jQuery 引脚

在我们的网站上，我们使用了一个名为 jquery pin 的插件，因为当时我们的插件存在一些问题。其中一些问题已得到解决。

---

我们插件的一个优点是它在调整大小时表现更好（只要您不尝试使浮动 div 具有粘性 - 如果您以浮动为目标，而是以浮动内的 div 为目标 -见here)。元素会在粘贴时动态调整大小。

另一方面，Jquery pin 将允许您为粘性元素的容器动态设置底部边界。

Answer 2

这是一个简单的脚本，您可以使用它来重新创建您展示的侧边栏示例。

作为一个帮助你的开始，这应该足够了。

JSFIDDLE DEMO

脚本：

 $(document).ready(function() {
 $(window).scroll(function() {
   var scrollVal = $(this).scrollTop();
    if ( scrollVal > 150) {
        $('#subnav').css({'position':'fixed','top' :'0px'});
    } else {
        $('#subnav').css({'position':'static','top':'auto'});
    }
});
});

希望对你有帮助

Answer 3

类似this？

我使用了 Waypoints sticky elements，效果很好。