jquery - 滚动时将 div 固定到页面顶部

标签 jquery html css scroll blogger

我意识到这个问题之前已经被问过 - 但我已经搜遍了几乎所有我能找到的东西,我想要这样的东西 - Incredible Things

这是我所拥有的http://shoelesstestblog.blogspot.com

这是代码

          <div id="myElement">
          <div id="nav">
          <a href="">Home</a>
          </div>
          </div>

          <style>
          #myElement {
          background-color: #fff;
          color: #fff;
          font-family: 'Bitter';
          font-size: 13px;
          letter-spacing: 1px;
          line-height: 40px;
          margin-left: -180px;
          opacity: 0.9;
          text-align: center;
          text-transform: uppercase;
          width: 1280px;
          word-spacing: 20px;
          z-index: 5000;
          }
          </style>


          <script type="text/javascript"> 

          var yPosition; // save original y position of element here



          window.onload = function(){ // once entire page is loaded this function is fired
              // save original y position of element before it is scrolled
              yPosition = document.getElementById("myElement").offsetTop;
          }

          window.onscroll = function(){ // scrolling fires this function      

              var myElement = document.getElementById("myElement"); // for cleaner code

                  // compare original y position of element to y position of page
                  if( yPosition <= window.pageYOffset ){ 

                  // snap element to the top by changing css values of element
                  myElement.style.position = "fixed";
                  myElement.style.top = "0px"; 

              }
                else {          

                  // re-position to original flow of content
                  myElement.style.top = ""; // set to default       
              }                  
          }      

          </script>

最佳答案

如果您希望固定到页面顶部的元素是 <div id="myElement">我建议您添加属性 position:fixed;到元素对应的 CSS。

像这样:

 #myElement {
      left: 0px;
      top: 0px;
      position:fixed;
      background-color: #fff;
      color: #fff;
      font-family: 'Bitter';
      font-size: 13px;
      letter-spacing: 1px;
      line-height: 40px;
      margin-left: -180px;
      opacity: 0.9;
      text-align: center;
      text-transform: uppercase;
      width: 1280px;
      word-spacing: 20px;
      z-index: 5000;
      }
      </style>

我还添加了属性left: 0px; top: 0px;确定元素在屏幕上的位置。

关于jquery - 滚动时将 div 固定到页面顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19263905/

相关文章:

javascript - 图片未加载到 Canvas 上?

jquery - 无法正确使用 Bootflat。

javascript - 如何通过 jQuery 对 html 元素进行分页

javascript - 如何使用 javascript 或 jquery 获取这些输入的值

java - Spring MVC动态列表表单提交

javascript - 选择选项显示输入 block 并输入计数并自动显示另一个输入值的值

html - 如何使用跨越 tds 为 Html 表中的列着色

javascript - 动态更改 Javascript 类对象的颜色?

javascript - 根据多个选项卡中的cookie更新div元素值

javascript - 使用日期选择器选择日期然后显示日期减去一天