堆栈内存溢出
  简体   繁体   English

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

[英]Fixed position sidebar that moves when scrolling

 原文  2013-02-06 04:27:51  6   2    jquery/ css/ layout/ css-position

问题描述

So, I have this pretty basic layout, really just experimenting to see if I make this work. 因此，我有一个非常基本的布局，实际上只是尝试看看是否可以完成此工作。

http://jsfiddle.net/PZP8p/ http://jsfiddle.net/PZP8p/

Here's some code (that's the same as the jsfiddle) 这是一些代码（与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>

It's like, left sidebar, center content, right sidebar and a header at the top. 就像，左侧边栏，中心内容，右侧边栏和顶部的标题一样。

What I'd like to do is to is have the left and right sidebars be 150px from the top (the height of the header) then as you scroll down to the header they're 10px from the top. 我想做的是使左侧和右侧边栏距顶部（标题的高度）150像素，然后向下滚动到标题时，距顶部10像素。

This page is a perfect example of what I want to do. 此页面是我要执行的操作的完美示例。 http://readwrite.com/2013/02/05/why-jailbreaking-ios-6-is-popular-enough-to-break-cydia http://readwrite.com/2013/02/05/why-jailbreaking-ios-6-is-popular-enough-to-break-cydia

It's like it gradually moves closer to the top, pixel by pixel as the user scrolls down. 就像它随着用户向下滚动逐像素地逐渐靠近顶部一样。

I'm thinking jquery somehow? 我以某种方式在考虑jquery？

2 个解决方案

解决方案1
 0  2013-02-06 05:26:54

yes it is done with the help of JQuery you have to include JQuery in your html file and here is the function: here is the link of jsfiddle http://jsfiddle.net/sarfarazdesigner/xDfya/ or you can add this code 是的，它是在JQuery的帮助下完成的，您必须在HTML文件中包含JQuery，这是函数：这是jsfiddle的链接http://jsfiddle.net/sarfarazdesigner/xDfya/或您可以添加此代码
$(window).scroll(function () { if ($(this).scrollTop() > 150) { $（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>

you can do whatever you want in this if or else condition and let me know if you have any problem 您可以在这种情况下做任何您想做的事情，如果您有任何问题，请告诉我

解决方案2
 0  2013-05-15 23:31:19

You can use Javascript to detect scroll position, and if the element hits the desired y position, add a pixel to a style.top for every pixel scrolled down (making it appear fixed after the user has scrolled past the header). 您可以使用Javascript检测滚动位置，如果元素达到所需的y位置，则向style.top添加一个像素，以向下滚动的每个像素（使该像素在用户滚动超过标题后显得固定）。

In order to do this, you have to add an id to the section that will scroll a bit before appearing fixed, and add the javascript that measures the scroll and positions the id. 为此，您必须在将要滚动的部分中添加一个ID，然后再显示固定值，并添加用于测量滚动并定位该ID的JavaScript。

I re-worked the html above to a more conventional 3-column layout with fixed right and left widths, and a fluid center content area. 我将上面的html重新处理为更常规的3列布局，该布局具有固定的左右宽度和流体中心内容区域。

The relevant javascript is below, and here's a jsFiddle DEMO ... 下面是相关的javascript，这是jsFiddle 演示 ... 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 #sidebar位置：固定于某些滚动 - #sidebar position:fixed at certain scrolling 滚动时固定侧栏的计算 - Calculation for sidebar fixed when scrolling 定位固定侧边栏，溢出滚动不滚动到底部 - Position fixed sidebar with overflow scroll not scrolling to bottom 固定位置Div可防止焦点在其元素之间移动时滚动 - Fixed Position Div prevents scrolling when focus moves betwen its elements 滚动时如何使侧边栏固定导航栏 - how to make sidebar to fixed navbar when scrolling 当侧边栏很长时，滚动/固定侧边栏会被切断 - Scrolling/fixed sidebar gets cut off when sidebar is very long 固定位置的侧边栏，无需滚动-将高度设置为内容的高度 - Fixed position sidebar without scrolling - set height to height of content 具有固定的侧边栏滚动的视差 - Parallax with a fixed sidebar scrolling ...移动的固定位置元素？ - Fixed position element that… moves? jQuery固定位置侧边栏 - Fixed position sidebar with jQuery
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM