Как исправить div под заголовком после прокрутки?

У меня есть заголовок и баннер под ним. Ниже этого баннера у меня есть мое содержание. Поэтому, когда я прокручиваю баннер, он должен уйти (в моем случае я увеличил индекс z заголовка, поэтому баннер в основном скрывается за ним), и когда вы прокручиваете содержимое, вы должны объединиться с заголовком. Так что я смог сделать это с небольшим CSS.Как исправить div под заголовком после прокрутки?

Теперь, когда мой контент div сливается с заголовком, я хочу, чтобы он застрял там, а затем вся страница должна прокручиваться вместе.

Текущий CSS для Прокрутка

#header { 
    height: 100px; 
    background: #bdbdbd; 
    position: fixed; 
    width: 100%; 
    z-index: 10; 
} 

#banner { 
    width: 100%; 
    height: 300px; 
    position: fixed; 
    top: 100px; 
    background: #707070; 
} 

#content { 
    width: 100%; 
    position: relative; 
    top: 400px; 
    background: #ebebeb; 
    height: 1500px; /* Demo purposes */ 
}

Как этого добиться?

источник

2016-02-25 Harkirat Saluja

вы будете достаточно любезен, чтобы показать нам, что вы делали до сих пор? код, пожалуйста, –

, пожалуйста, поделитесь некоторыми фрагментами кода, которые вы пробовали. – Braj

Поделитесь ссылкой на javascript-код html css! – Sandeep

Попробуйте это:

<style type="text/css"> 
#header { 
    height: 100px; 
    background: #bdbdbd; 
    position: fixed; 
    width: 100%; 
    z-index: 9999; 
    top:0px; 
} 

#content { 
    width: 100%; 
    position: relative; 
    margin-top:100px; 
    background: #ebebeb; 
} 
#banner { 
    position:relative; 
    width: 100%; 
    height: 300px; 
    background: #707070; 
} 

#banner.stick { 
    position: fixed; 
    top: 100px; 
    z-index: 1000; 
} 
body { 
    margin: 1em; 
} 
p { 
    margin: 1em auto; 
} 
</style>

Вот тело:

<body style="padding:0px; margin:0px;"> 
<div id="header">This is header</div> 

<div id="content"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque, 
    lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh 
    lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus. 
    Maecenas lacinia bibendum accumsan. Curabitur lobortis convallis purus 
    non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat. 
    Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan 
    ullamcorper lorem id porttitor. Aliquam vitae libero eget magna mollis 
    gravida.</p> 
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas 
    tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, 
    justo at ornare bibendum, magna lectus cursus felis, tristique consectetur 
    arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum 
    orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant 
    morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
    Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p> 
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi 
    sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum 
    neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices 
    mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum 
    dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit 
    quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi 
    tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur 
    accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque 
    ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar. 
    Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum. 
    Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse 
    molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna 
    porttitor suscipit.</p> 

<div id="sticky-anchor"></div> 
<div id="banner">This will stay at top of page</div> 

<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris 
    nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. 
    Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus 
    tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod 
    velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales 
    imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. 
    Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla 
    id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque 
    ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. 
    Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci 
    enim egestas arcu, sit amet sodales risus leo quis nisi.</p> 
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas 
    tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, 
    justo at ornare bibendum, magna lectus cursus felis, tristique consectetur 
    arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum 
    orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant 
    morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
    Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p> 
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi 
    sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum 
    neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices 
    mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum 
    dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit 
    quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi 
    tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur 
    accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque 
    ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar. 
    Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum. 
    Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse 
    molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna 
    porttitor suscipit.</p> 
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris 
    nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. 
    Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus 
    tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod 
    velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales 
    imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. 
    Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla 
    id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque 
    ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. 
    Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci 
    enim egestas arcu, sit amet sodales risus leo quis nisi.</p> 
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas 
    tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, 
    justo at ornare bibendum, magna lectus cursus felis, tristique consectetur 
    arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum 
    orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant 
    morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
    Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p> 
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi 
    sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum 
    neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices 
    mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum 
    dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit 
    quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi 
    tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur 
    accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque 
    ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar. 
    Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum. 
    Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse 
    molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna 
    porttitor suscipit.</p> 
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris 
    nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. 
    Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus 
    tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod 
    velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales 
    imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. 
    Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla 
    id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque 
    ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. 
    Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci 
    enim egestas arcu, sit amet sodales risus leo quis nisi.</p> 

</div> 
<script type="text/javascript"> 
function sticky_relocate() { 
    var window_top = $(window).scrollTop(); 
    var div_top = $('#sticky-anchor').offset().top-100; 
    if (window_top > div_top) { 
     $('#banner').addClass('stick'); 
    } else { 
     $('#banner').removeClass('stick'); 
    } 
} 

$(function() { 
    $(window).scroll(sticky_relocate); 
    sticky_relocate(); 
}); 
</script> 
</body>

источник

2016-02-25 07:43:39

Как исправить div под заголовком после прокрутки?

ответ

Смежные вопросы