Question

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

这些是我的代码。 div叫：.sidebar是我想要在滚动时固定的那个！我已经展示了更多的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

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

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

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 2

我是您链接到的网站的一个开发者，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 Pin

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

我们的插件的一个优点是它在调整大小时表现更好（只要你不尝试使浮动的div粘贴 - 如果你正在瞄准浮点数，而是将目标定位在内部反而浮动 - 见here）。元素会在粘贴时动态调整大小。

另一方面，

Jquery引脚将允许您为粘性元素的容器动态设置底部边界。

Answer 3

类似于this？

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

如何在使用position：relative时制作固定菜单/侧边栏？

3 个答案:

jQuery stickToTop（无耻插件）

jQuery Pin