Question

http://jsfiddle.net/j2qjgob5/

   <div id="wrapper">
     <div id="new_country">
      <div id="new_country_text" >
       New Country
     </div>
    </div>
   </div>
  <div id="space"><br><br>blablablablabballabla</div>

#container {
padding: 100px 0 2500px;
}

#wrapper {
   width: 100%;
   height: 57px;
   border: solid;
}

#new_country {
  width: 162px;
  height: 42px;
  position: relative;
  background-color: #1abc9c;
  border-radius: 5px;
  top: 8px;
}

#new_country:hover {
    opacity: 0.8;
}

#new_country:active {
    box-shadow: 0px 0px 9px 4px #16a085 inset;
}

#new_country_text {
    position: absolute;
    width: inherit;
    height: inherit;
    top: 50%;
    text-align: center;
    line-height: 0;
    display: table;
    color: whitesmoke;
}

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

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

每当包装器div粘到顶部时，div下面会有一些向上的温度，然后包装器div会抽搐。如何在不影响任何其他div的情况下让div顺利地保持在顶部？感谢。

Answer 1

您需要清除文档中的默认边距：

html,body{
   margin: 0;
   padding: 0;
}

您的JS正在将.wrapper上的宽度和高度更改为：

$('#wrapper').css({'position': 'static', 'width': '100%', 'height': '57px', })

但是，您在页面加载时.wrapper的CSS是：

#wrapper {
   width: 50%;
   height: 44px;
   ...
}

使它们相同：

#wrapper {
   width: 100%;
   height: 57px;
   ...
}

FIDDLE

更新2

所以问题是.wrapper成为fixed，它会从文档流中删除它，导致#space部分跳转到页面顶部（因为标题不再被识别）。一个更简单的方法就是只需添加/删除一个类：

if ($(window).scrollTop() > $div.data("top")) { 
    $('#wrapper').addClass("fixed"); 
}
else {
    $('#wrapper').removeClass("fixed"); 
}

然后在您的CSS中，您可以添加规则并调整#space的填充，因为它是兄弟姐妹：

.fixed{
   position: fixed;
   top: 0;
   //any other styles
}

.fixed + #space{ //target sibling #space
   padding: 57px 0 0; //set padding to height of .wrapper
}

NEW FIDDLE

div坚持页面顶部的小问题

1 个答案: