0

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

http://jsfiddle.net/PZP8p/

这是一些代码（与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-jailbreak-ios-6-is-popular-enough-to-break-cydia

就像用户向下滚动时，它会逐个像素地逐渐靠近顶部。

我在想jquery吗？

4

2 回答 2

0

是的，它是在 JQuery 的帮助下完成的，你必须在你的 html 文件中包含 JQuery，这里是函数：这里是 jsfiddle http://jsfiddle.net/sarfarazdesigner/xDfya/的链接， 或者你可以添加这个代码
$( window).scroll(function () { 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 条件下做任何你想做的事情，如果你有任何问题，请告诉我

于 2013-02-06T05:26:54.203 回答
0

您可以使用 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();
}
于 2013-05-15T23:31:19.403 回答