根据屏幕上的当前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的 width ，然后处理它，如下所示：

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

编辑1：

如果您希望代码在更改浏览器的宽度时动态工作，而不是在加载时，则必须将其绑定到.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/