Question

我正在制作一个用页面固定的（位置固定），但它应该在滚动时始终固定在页面的顶部喜欢这个网站 -

http://www.simplilearn.com/project-management/pmp-certification-training

在这个网站中作为查询表单，在向下滚动时始终保持顶部，最初它在中间，在到达该位置后它将一直粘到顶部，直到页面结束滚动

这是我的风格代码

.right-tab {
position: fixed;
background-color: red;
 z-index:100; 
 top:0;
 left:0;
  }

这是我的身体

 <div >
    <h1>Sample This 
    Will go up while scrolling </h1>
    </div>
    <div class="right-tab">
    <h1>Sample This Will not  go up while scrolling </h1>
    </div>

Before scrolling the page

After scrolling the page

Answer 1

https://jsfiddle.net/5ADzD/743/

https://jsfiddle.net/5ADzD/743/embedded/result/

<div class="long">Long Div to enable scrolling</div>

<div id="container">
    <div id="navwrap">NAV WRAP</div>
</div>

JAVA SCRIPT


function fixDiv() {
    var $div = $("#navwrap");
    if ($(window).scrollTop() > $div.data("top")) { 
        $('#navwrap').css({'position': 'fixed', 'top': '0', 'width': '100%'}); 
    }
    else {
        $('#navwrap').css({'position': 'static', 'top': 'auto', 'width': '100%'});
    }
}

$("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);

样式

#container {
    padding: 1000px 0 2500px;
}
#navwrap{
    width: 100%;
    height: 50px;
    background-color: #C00;
}

.long {
    background-image: linear-gradient(top, #eee, #aaa);
    background-image: -moz-linear-gradient(top, #a00, #000);
    color: white;
    height: 2000px;
    padding-top: 50px;
}

Answer 2

也使用z-index：

.right-tab {
    position: fixed;
    background-color: red;
    z-index:100;
    top:0;
    }

jsfiddle

Answer 3

请使用以下css

.right-tab {
    position: fixed;
    background-color: red;
    z-index:100;
    top:0;
}

Answer 4

你错过了你想要修复的位置

 .right-tab {
        position: fixed;
        background-color: red;
       top:0;
       left:0; // change the axis with your values
          }

Answer 5

不需要两个单独的DOM对象（即右侧选项卡类）。只需使用一个元素并使用javascript / jQuery即可在需要时修复它。检查窗口滚动位置和元素位置，以及何时满足critera：

$(window).scroll(function(){
   if(window.pageYOffset >= $('.right-tab').position().top)
      // Add fixed styling to your .right-tab element here to make it fixed
   else 
      // Remove the fixed styling

div不是停留在页面顶部，而在html页面中固定位置

5 个答案: