Question

对于我的网站，我实施了一个固定的侧边栏：

我的问题是，如果我将侧边栏position设置为fixed，那么我的侧边栏也会显示在我的整页标题前面。我希望我的侧边栏在我的标题之后开始，好像我已将position设置为absolute top: 100vh，除非它向下滚动时保持固定。

你怎么能做到这一点？非常感谢你提前！

＆＃13;

body {
  margin:0;
}

#header {
  height: 100vh;
  width:100%;
  position:relative;
  background-color:blue;
}


#main {
        margin-left: 20vw;
        height: 100vh;
    }
    
    sidebar {
        width: 20vw;
        height: 100vh;
        top: 0;
        left: 0;
        background-color: #130E0A;
        position: fixed;
        z-index: 1;
    }

＆＃13;

<!DOCTYPE html>
    <html>
        <head>
    		<title>Etude de controverse : Le théorème des 4 couleurs et les preuves informatiques</title>
            <meta name='viewport' content='initial-scale=1.0'>
            <meta charset='utf-8'>
        </head>
        <body>
    		<section id='header'></section>
    
            <section id='main'>
                <sidebar></sidebar>
                <div id='timeline' class='cd-container'></div>
            </section>
        </body>
    </html>

＆＃13;

Answer 1

如果你可以使用jQuery，你可以使用类似的东西。

＆＃13;

body {
  margin:0;
}

#header {
  width:100%;
  background-color:blue;
   height: 1000px;
}


#main {
        margin-left: 20vw;
        height:10000px;
    }
    
    sidebar {
        width: 20vw;
        height: 500px;
        display:block;
        background-color: #130E0A;
        position: relative;
        z-index: 1;
    }
    
    sidebar.fixed {
      position:fixed;
      left:20vw;
      top:0;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
        <head>
    		<title>Etude de controverse : Le théorème des 4 couleurs et les preuves informatiques</title>
            <meta name='viewport' content='initial-scale=1.0'>
            <meta charset='utf-8'>
        </head>
        <body>
    		<section id='header'></section>
    
            <section id='main'>
                <sidebar></sidebar>
                <div id='timeline' class='cd-container'></div>
            </section>
        </body>
    </html>

＆＃13;

{{1}}

＆＃13;

Answer 2

看看这个。刚刚将html中的一些内容更改为html5标准并编辑了css。我希望能解决你想要的问题。

＆＃13;

#main {
    margin-left: 20vw;
    height: 100vh;
}

header {
  width: 100%;
  height: 85px;
  background-color: red;
  padding: 20px;
  
}

#sidebar {
    width: 20vw;
    height: 100vh;
    background-color: #130E0A;
    position: fixed;
    left: 0.9vw;
    z-index: 1;
}

＆＃13;

<header>
  I am the Header | Je suis le header.
</header>

<section id="main">
  <div id="sidebar">
    I am the sidebar | Je suis le sidebar.
  </div>
</section>

＆＃13;

Answer 3

这是一个javascript解决方案，可以监控您滚动的距离并在滚动标题时使用fixed

var sidebar = document.getElementById('sidebar');
window.addEventListener('scroll',function() {
  var st = document.body.scrollTop,
      mt = document.getElementById('main').offsetTop;
  if (st > mt) {
    sidebar.classList.add('fixed');
  } else {
    sidebar.classList.remove('fixed');
  }
})

body {
  margin: 0;
}

#main {
  height: 100vh;
  position: relative;
}

#header {
  background: red;
}

sidebar {
  background-color: #130E0A;
  width: 20vw;
  height: 100vh;
  font-size: 5em;
  color: white;
  position: absolute;
  top: 0; left: 0;
  overflow-y: scroll;
}

.fixed {
  position: fixed;
}

#timeline, sidebar {
  font-size: 5em;
}

#timeline {
  margin-left: 20vw;
}

<!DOCTYPE html>
<html>

<head>
  <title>Etude de controverse : Le théorème des 4 couleurs et les preuves informatiques</title>
  <meta name='viewport' content='initial-scale=1.0'>
  <meta charset='utf-8'>
</head>

<body>
  <section id='header' style='height: 100vh; margin: 0;'></section>

  <section id='main'>
    <sidebar id='sidebar'><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p></sidebar>
    <div id='timeline' class='cd-container'><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p></div>
  </section>
</body>

</html>

修复了整页标题后的侧边栏

3 个答案: