Question

我有两个div

<div class="container">
<div id="top_bar">
    <ul>
        <li class="mb">Call Us: (+92) 42 3578 1448-9 - Mail: info@mymail.com</li>
    </ul>
    <div class="social_icons">
        <a href="#">FB.icon</a>
    </div>
</div>

第二个div

 <div class="container">
    <div class="navbar-header">
        my navigation bar
    </div>
</div>

我希望当页面向下滚动然后第二个div位置顶部变为零并修复？ 怎么可能，帮助我？

Answer 1

我已将top_bar更改为navbar-header的同一容器，并使用Jquery .scroll()方法修复滚动时的top_bar。希望这会有所帮助。

<强> HTML

<div class="container">
    <div class="navbar-header">
        my navigation bar
    </div>
     <div id="top_bar">
    <ul>
        <li class="mb">Call Us: (+92) 42 3578 1448-9 - Mail: info@mymail.com</li>
    </ul>
    <div class="social_icons">
        <a href="#">FB.icon</a>
    </div>
</div>

<强> CSS

.container{
    height: 2000px;
  padding-top: 100px;
}
.navbar-header{
    background: #ccc
}
#top_bar{

        background: #0390d4
}
.fixed {
  position: fixed;
  top:0; left:0;
  width: 100%; }

<强> JS

$(window).scroll(function(){
  var sticky = $('#top_bar'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

Demo

Answer 2

检查一下的 Demo

<强> CSS：

.sticky{ position:fixed; width:100%; top:0px; left:0px; }

<强> JS：

$(window).scroll(function() { if ($(this).scrollTop() > 100){ $('.navbar-header').addClass("sticky"); } else{ $('.navbar-header').removeClass("sticky"); } });

Answer 3

jsfiddle上的演示

这是jQuery代码---

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery(window).scroll(function() {
        var scroll = jQuery(window).scrollTop();
        if (scroll >= 60) {
            jQuery(".myDiv").addClass("fixed_div"); 
        }               
        if (scroll <= 60) {
            jQuery(".myDiv").removeClass("fixed_div"); 
        }
    });
});
</script>

这是CSS代码---

.myDiv{
        background:red;
        height:50px;
        transition:all .25s;
    }
    .fixed_div{
        position:fixed;
        left:10px;
        right:10px;
        top:10px;
        background:blue;
    }

这是HTML代码---

    <h1>Scroll down to see the effect</h1>
    <div class="myDiv">
        Scroll Down 
    </div>

页面滚动时css上边距修复

3 个答案: