Javascript 向下滚动一点后，如何粘贴div_Javascript_Html_Css

Javascript 向下滚动一点后，如何粘贴div

javascript html css

Javascript 向下滚动一点后，如何粘贴div,javascript,html,css,Javascript,Html,Css,当我们向下滚动页面时，当第二个div遇到顶部边界时，我想粘贴第二个div。当它被修复后，它应该和其他页面一起滚动。我怎样才能做到这一点 #settings{ width:100%; background:#383838; height:60px; } #menu{ width:100%; position:relative; height:100px; background:#aaa; } #body-content{ height

当我们向下滚动页面时，当第二个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>

在本例中，当我们滚动页面时，第二个div应该是固定的。当我们向上滚动时，它本身应该变成上一个状态。请帮帮我。

您可以通过

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库链接（假设您是初学者）

我想在这里添加一条评论，但我没有足够的声誉这么做。我在一个项目中需要类似的东西，我想我应该分享我对@Sowmya答案的修改。我对代码进行了一些清理，使滚动效果更加平滑

$（函数（）{
//检查粘性收割台的初始位置
var stickyHeaderTop=$（'#stickyheader'）.offset（）.top；
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>stickyHeaderTop）{
$（'#stickyheader'）.css({
位置：'固定'，
顶部：“0px”
});
$（'othercontent'）.css（'margin-top'，$（'stickyheader'）.outerHeight（true）+parseInt（$（'unstickyheader'）.css（'marginBottom'））；
}否则{
$（'#stickyheader'）.css({
位置：'静态'，
顶部：“0px”
});
$（'#othercontent'）.css（'margin-top'，'0px'）；
}
});
});
正文{
字体：13px无衬线；
}
#粘性割台{
宽度：100%；
高度：40px；
背景：黑色；
颜色：白色；
边缘底部：10px；
}
#无粘性收割台{
边缘底部：15px；
}
为菜单div分配一个id：
 <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: '' });
                            }
                });
    });


$（“文档”）.ready（函数（$）{
//在文档加载时，获取要粘贴到特定位置的div的位置
var offset=document.getElementById（'menuContainer'）.getBoundingClientRect（）；
//从浏览器顶部获取位置
var topoffsets=offsets.top；
//将功能绑定到windows滚动事件
$（窗口）.bind（'scroll'，函数（）{
如果（$（窗口）.scrollTop（）>TopOffset）{
$（“#menuContainer”）.css（{top:0，位置：'fixed'}）；
}否则{
$（“#menuContainer”）.css（{顶部：''，位置：'}）；
}
});
});

没有`


引导示例
/*注意：尝试删除以下行以查看CSS定位的效果*/
.粘贴{
排名：0；
宽度：100%；
}
.粘贴+.容器液体{
填充顶部：70px；
}
引导粘贴示例
固定（粘性）滚动导航条
滚动此页面以查看导航栏在data spy=“粘贴”下的行为
滚动指定数量的像素后，导航栏将附加到页面顶部






一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
因此，如果我说的没错，您希望修复菜单。但是当你向下滚动时，它必须移动到页面顶部？是的。。。当我们向下滚动时，只有“菜单”必须固定在顶部。当我们向上滚动到最大值时，必须显示“设置”和“菜单”。但我不想在表中使用。是否有其他方法？@user1012181这只是一个示例。你可以添加任何你想要的。检查一下，有没有办法让jquery脚本也在智能手机上工作？在智能手机上测试时，菜单不粘？我不知道你是否注意到了。当它被修复时内容跳转到它创建的空白处。你能给出一个解决办法吗？请
<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: '' });
                            }
                });
    });