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

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

#settings{
    width:100%;
    background:#383838;
    height:60px;
}
#menu{
    width:100%;
    position:relative;
    height:100px;
    background:#aaa;
}
#body-content{
    height:900px;
    position:relative;
}

и HTML

<body>
<div id="top">
    <div id="settings">
    </div>
    <div id="menu">
    </div>
</div>
<div id="body-content">
</div>

</body>

Здесь, в этом примере http://jsfiddle.net/WBur3/, 2-й div должен быть исправлен при прокрутке страницы. Когда мы прокручиваем вверх, нужно переходить в предыдущее состояние. Пожалуйста, помогите мне.

Ответ 1

Вы можете получить этот эффект с помощью jquery

$(function(){
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');
                }
        });
  });

ДЕМО ЗДЕСЬ

ПРИМЕЧАНИЕ. Не забудьте включить ссылку на библиотеку jquery на своей странице (предполагая, что вы начинаете)

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Ответ 2

Я бы добавил комментарий здесь, но у меня недостаточно репутации, чтобы сделать это. Мне нужно было что-то подобное в проекте, и я думал, что поделюсь своими изменениями с ответом @Sowmya. Я немного очистил код и сделал эффект прокрутки намного более плавным. JSfiddle

$(function () {
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() > stickyHeaderTop) {
            $('#stickyheader').css({
                position: 'fixed',
                top: '0px'
            });
            $('#othercontent').css('margin-top', $('#stickyheader').outerHeight(true) + parseInt($('#unstickyheader').css('marginBottom')));
        } else {
            $('#stickyheader').css({
                position: 'static',
                top: '0px'
            });
            $('#othercontent').css('margin-top', '0px');
        }
    });
});

body {
    font: 13px sans-serif;
}
#stickyheader {
    width: 100%;
    height: 40px;
    background:black;
    color:white;
    margin-bottom: 10px;
}
#unstickyheader {
    margin-bottom: 15px;
}

Ответ 3

Назначить id в меню div:

 <div id ="menuContainer">

Включить jquery в проект и на страницу:

<script src="Scripts/jquery-1.11.3.min.js" type="text/javascript"></script>

Ниже приведен код для реализации желаемого эффекта:

<script type="text/javascript">

    $("document").ready(function ($) {

        // On document load get the position of the div u want to stick on certain position
        var offsets = document.getElementById('menuContainer').getBoundingClientRect();

        // Get position from top of browser
                var topoffsets = offsets.top;

                // Binding fuction to windows scroll event
                $(window).bind('scroll', function () {

                    if ($(window).scrollTop() > topoffsets) {

                               $("#menuContainer").css({ top: 0, position: 'fixed' });

                            } else {
                               $("#menuContainer").css({ top: '', position: '' });
                            }
                });
    });

Ответ 4

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="#" onclick="location.href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'; return false;">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
  top: 0;
  width: 100%;
}
.affix + .container-fluid {
  padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Basic Topnav</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
</body>
</html>

Без jQuery мы можем сделать это, используя приведенный выше код.