CSS верхнего поля исправить при прокрутке страниц

Question

У меня есть два ДИВЫХ

<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 class="container"> 
    <div class="navbar-header"> 
     my navigation bar 
    </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

Демо на 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 код IS- -

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

Answer 3

Проверить t его 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"); 
     } 
    });