滚动时移动的固定位置侧边栏答案

【问题标题】：Fixed position sidebar that moves when scrolling滚动时移动的固定位置侧边栏
【发布时间】：2013-01-21 05:00:00
【问题描述】：

所以，我有这个非常基本的布局，真的只是在尝试看看我是否能做到这一点。

这是一些代码（与 jsfiddle 相同）

<html>
    <head>
        <title>Layout Test</title>


        <style type="text/css">


        body {
        margin: 0;
        padding: 0;
        }



        .header {
        height: 150px;
        background-color: aqua;
        }

        .main-content {
        position: relative;
        margin-left: 240px;

        }


        .left {
        width: 220px;
        height: 100%;
        padding-left: 10px;
        padding-right: 10px;
        background-color: red;
        position: fixed;
        top:150px;
         -webkit-transition-duration: .2s;
         -moz-transition-duration: .2s;
         -o-transition-duration: .2s;
         transition-duration: .2s;
         overflow: scroll;
        }

        .center {
        background-color: blue;
        height: auto;
        margin-right: 300px;
        float: left;
        }

        .sidebar {
        width: 300px;
        height: 100%;
        position: fixed;
        right:0;
        background-color: green;
        float: left;
        }


        @media screen and (max-width:1150px) {
        .left {
        width: 80px;
        height: 100%;
        background-color: red;
        position: fixed;

        }
        .main-content {

        margin-left: 100px;

        }   

        .center {
        margin-right: 200px;


        }   

        .sidebar {
        width: 200px;

        }


        }

        </style>



    </head>
    <body>
        <div class="header"></div>

        <div class="left">

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>

        <div class="main-content">

            <div class="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

            <div class="sidebar"></div>


        </div>
        <div class="footer"></div>
    </body>
</html>

就像，左侧边栏，中心内容，右侧边栏和顶部的标题。

我想做的是让左右侧边栏距顶部 150 像素（标题的高度），然后当您向下滚动到标题时，它们距顶部 10 像素。

这个页面是我想做的一个完美的例子。 http://readwrite.com/2013/02/05/why-jailbreaking-ios-6-is-popular-enough-to-break-cydia

当用户向下滚动时，它会逐渐向顶部靠拢。

我在想 jquery 吗？

【问题讨论】：

标签： jquery css layout css-position

【解决方案1】：

是的，它是在 JQuery 的帮助下完成的，你必须在你的 html 文件中包含 JQuery，这里是函数：这是 jsfiddle http://jsfiddle.net/sarfarazdesigner/xDfya/ 的链接或者您可以添加此代码
$（窗口）。滚动（函数（）{ if ($(this).scrollTop() > 150) {

        $('.left').css({
            position:'fixed',
            top:'0',
            left:'0',
            right:'0',
            'z-index':'999999',
        })
    } 
    else {
        $('.left').css({
            position:'fixed',
            top:'150px'
        })

    }
});
</script>

在 if 或 else 条件下，你可以做任何你想做的事情，如果你有任何问题，请告诉我

【讨论】：

我知道怎么做你发布的，那只是用 jquery 改变 CSS。我想要做的（如我发布的 readwrite.com 的链接）是在用户向下滚动时让它与页面一起平滑移动。
是的，我看过那个网站，对于类似的功能，您可以使用动画，我只是向您展示了如何做到这一点

【解决方案2】：

您可以使用 Javascript 检测滚动位置，如果元素到达所需的 y 位置，则为向下滚动的每个像素添加一个像素到 style.top（使其在用户滚动经过标题后显示为固定）。

为了做到这一点，您必须向部分添加一个 id，该部分会在出现固定之前稍微滚动一下，并添加测量滚动和定位 id 的 javascript。

我将上面的 html 重新设计为更传统的 3 列布局，具有固定的左右宽度和流畅的中心内容区域。

相关的javascript如下，这里是jsFiddle DEMO...

function fixTop() {
  // get scroll distance
  function getScrollY() {
    var y = 0;
    if( typeof ( window.pageYOffset ) == 'number' ) {
        y = window.pageYOffset;
    } else if ( document.body && ( document.body.scrollTop) ) {
        y = document.body.scrollTop;
    } else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
        y = document.documentElement.scrollTop;
    }
    return [y];
  }  

  var y = getScrollY();
  var y = y[0];

  // tell it which element has to scroll, then stick
  var fixMe = document.getElementById('left' );

  // measure distance and fix it at the correct scroll position  
  function getYset() {

      // tell it how far it has to go before fixing
      var scrollToHere = 200;

      // check where it is and provide the style.top value
      if (y > scrollToHere) {
        ySet = y - scrollToHere;
        return [ySet];
      } else {
        ySet = 0;
        return [ySet];
      }
  }

  var ySet = getYset();
  var ySet = ySet[0];

  //  set the style.top according to the calculations above
  fixMe.style.top = ySet + "px";
}

// run the function when user scrolls
window.onscroll = function() {
  fixTop();
}

【讨论】：