Javascript 在单页网站中调整浏览器大小时，将显示其余div 我正在开发一个单页网站，页面由页眉和页脚组成，分别固定在顶部和底部，中间的内容。内容是一个具有100%宽度和高度的div_Javascript_Jquery_Html_Css

Javascript 在单页网站中调整浏览器大小时，将显示其余div 我正在开发一个单页网站，页面由页眉和页脚组成，分别固定在顶部和底部，中间的内容。内容是一个具有100%宽度和高度的div

javascript jquery html css

Javascript 在单页网站中调整浏览器大小时，将显示其余div 我正在开发一个单页网站，页面由页眉和页脚组成，分别固定在顶部和底部，中间的内容。内容是一个具有100%宽度和高度的div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,在标题处有一个菜单，可以通过平滑滚动访问各个部分，此时一切正常，但当我选择第三个部分并调整浏览器大小时，我可以看到上方和下方的div，它们应该是隐藏的我试图用addClass/removeClass定位当前的div absolute，并在调整大小时修改高度，但也不起作用代码如下： CSS: * { 保证金：0；填充：0； } html，正文{ 身高：100%； } 身体{ 背景色：红色；溢出：隐藏； } #卡贝塞拉，页脚{ 宽度：100%；高度：50px；背景色：#d1d1；位置

在标题处有一个菜单，可以通过平滑滚动访问各个部分，此时一切正常，但当我选择第三个部分并调整浏览器大小时，我可以看到上方和下方的div，它们应该是隐藏的

我试图用addClass/removeClass定位当前的div absolute，并在调整大小时修改高度，但也不起作用

代码如下：

CSS:


* {
保证金：0；
填充：0；
}
html，正文{
身高：100%；
}
身体{
背景色：红色；
溢出：隐藏；
}
#卡贝塞拉，页脚{
宽度：100%；
高度：50px；
背景色：#d1d1；
位置：固定；
左：0；
z指数：1000；
}
#卡贝塞拉{
排名：0；
}
#页脚{
底部：0；
}
#菜单里{
列表样式：无；
浮动：左；
右边距：10px；
}
#菜单里的跨度{
光标：指针；
}
centrar先生{
宽度：960px；
保证金：0自动；
}
#第一节{
背景色：#fbfb；
}
#第2节{
背景色：#017EFF；
}
#第三节{
背景色：#9F25F6；
}
#第四节{
背景色：#FB8114；
}
#第五节{
背景色：#3737；
}
.布局{
宽度：100%；
身高：100%；
}
.主动{
位置：绝对位置；
排名：0；
左：0；
}

JAVASCRIPT:

<script type="text/javascript">
        $(document).ready(function(){
            $('a[href^="#"]').on('click',function (e) {
                e.preventDefault();

                var target = this.hash;
                var $target = $(target);

                $('html, body').stop().animate({
                    'scrollTop': $target.offset().top
                }, 900, 'swing');

                /*$("#section1").removeClass("active");
                $("#section2").removeClass("active");
                $("#section3").removeClass("active");
                $("#section4").removeClass("active");
                $("#section5").removeClass("active");*/

                /*$target.addClass("active");*/
            });


            /*$(window).resize(function () {
                var doc = $(document).height() || $(window).height();

                var cabecera = $("#cabecera").height();
                var footer = $("#footer").height();

                var margin = doc - cabecera - footer;
                $('#section3').css({ 'min-height': + margin + 'px' });
            });

            $(window).resize();*/
        });
    </script>


$（文档）.ready（函数（）{
$（'a[href^=“#“]”）。关于（'click'，函数（e）{
e、 预防默认值（）；
var target=this.hash；
变量$target=$（目标）；
$（'html，body'）.stop（）.animate({
'scrollTop'：$target.offset（）.top
}，900，‘摇摆’；
/*$（“#第1节”）。删除类（“活动”）；
$（“#第2节”）。删除类（“活动”）；
$（“#第3节”）。删除类（“活动”）；
$（“#第4节”）。删除类（“活动”）；
$（“#第5节”）。删除类（“活动”）*/
/*$target.addClass（“活动”）*/
});
/*$（窗口）。调整大小（函数（）{
var doc=$（文档）.height（）| |$（窗口）.height（）；
var cabecera=$（“#cabecera”）.height（）；
var footer=$（“#footer”）.height（）；
var保证金=单据-卡贝塞拉-页脚；
$（#section3'）.css（{'minheight'：+margin+'px'}）；
});
$（窗口）.resize（）*/
});

HTML:

<body>
    <div id="cabecera">
        <div class="centrar">
            <ul id="menu">
                <li><a href="#section1" target="_self">section1</a></li>
                <li><a href="#section2" target="_self">section2</a></li>
                <li><a href="#section3" target="_self">section3</a></li>
                <li><a href="#section4" target="_self">section4</a></li>
                <li><a href="#section5" target="_self">section5</a></li>
            </ul>
        </div>
    </div>

    <div id="section1" class="layout"></div>
    <div id="section2" class="layout"></div>
    <div id="section3" class="layout"></div>
    <div id="section4" class="layout"></div>
    <div id="section5" class="layout"></div>

    <div id="footer">
        <div class="centrar"></div>
    </div>
</body>

编辑：
//

复制步骤：
1）打开大小调整为小窗口的浏览器
2）打开页面
3）转到“第3节”
4）更改浏览器的高度，增加或减少

5）看看上面和下面的div:S

在窗口的resize事件中，您必须滚动到所选元素的顶部（首先初始化），而不需要任何动画，以便对访问者透明地执行

$target变量需要声明为“全局”，以便resize函数知道最后访问的部分是哪个

<script type="text/javascript">
        $(document).ready(function(){
            var $target = $(".layout:first");
            $('a[href^="#"]').on('click',function (e) {
                e.preventDefault();

                var target = this.hash;
                $target = $(target);

                $('html, body').stop().animate({
                    'scrollTop': $target.offset().top
                }, 900, 'swing');

            });
            $(window).resize(function(){
                $(window).scrollTop($target.offset().top);
            });
        });
    </script>


$（文档）.ready（函数（）{
var$target=$（“.layout:first”）；
$（'a[href^=“#“]”）。关于（'click'，函数（e）{
e、 预防默认值（）；
var target=this.hash；
$target=$（target）；
$（'html，body'）.stop（）.animate({
'scrollTop'：$target.offset（）.top
}，900，‘摇摆’；
});
$（窗口）。调整大小（函数（）{
$（窗口）.scrollTop（$target.offset（）.top）；
});
});

我无法用代码重现您的错误。您在哪个浏览器中测试此功能？如果有疑问，添加一个屏幕截图？它发生在chrome、firefox、ie，。。。你是对的，一个屏幕截图将更好地演示问题，谢谢

<script type="text/javascript">
        $(document).ready(function(){
            var $target = $(".layout:first");
            $('a[href^="#"]').on('click',function (e) {
                e.preventDefault();

                var target = this.hash;
                $target = $(target);

                $('html, body').stop().animate({
                    'scrollTop': $target.offset().top
                }, 900, 'swing');

            });
            $(window).resize(function(){
                $(window).scrollTop($target.offset().top);
            });
        });
    </script>