html - 根据屏幕上的当前 div 更改菜单栏大小

Question

我正在尝试制作一个菜单栏，它根据当前显示在屏幕上的 div 来改变它的大小。

类似这样的内容:http://housing.com/dsl

我当前的菜单 CSS 和页面其余部分的 HTML 标记如下:

<div class="menu">
    <a href="#content1">1</a>
    <a href="#content2">2</a>
</div>
<div class="content">
    <div class="content1" id="content1">
    </div>
    <div class="content2" id="content2">
    </div>
</div>

CSS

.menu{
    width:100%;
    height:80px;
    background-color: #336699;
    margin-top:-20px;
    margin: 0 auto; 
    margin-bottom: 10px;
    position:fixed;
}

Answer 1

这并不难。您必须获取 div 的宽度，然后对其进行处理，如下所示:

$(document).ready(function() {
    // Get the div's width
    var divWidth = $("#content").width();
    // Update div's width
    $("#content").css("width", divWidth + 'px');
});

编辑 1:

如果您希望代码在更改浏览器宽度时动态工作，而不是在加载时动态工作，那么您必须将它绑定(bind)到 .resize() 事件:

$(window).bind("resize", function(){
    // Get the div's width
    var divWidth = $("#content").width();
    // Update div's width
    $("#content").css("width", divWidth + 'px');
});

编辑 2:

如果您希望在页面上做一些事情，比方说，向下滚动 50px，那么您需要使用 .scroll() 函数来实现:

 $(document).ready(function(){
    $(window).scroll(function(){
        if ($(window).scrollTop() > 50){
            // Get the div's width
            var divWidth = $("#content").width();
            // Update div's width
            $("#content").css("width", divWidth + 'px');
        }
    });
});

在线演示示例:

http://jsfiddle.net/ZVXBJ/1/