jQuery根据另一个div的位置为一个div设置css值答案

【问题标题】：jQuery set css value for a div depending on the position of another divjQuery根据另一个div的位置为一个div设置css值
【发布时间】：2014-10-13 20:58:03
【问题描述】：

我的页面上有一个名为“.nav-wrapper”的 div - 此 div 的位置将位于多个位置之一，具体取决于后端的用户设置。我正在尝试做的是使用 jQuery，确定这个 div 的顶部位置，如果它是某个值，则将 margin-top 值添加到不同的 div。

例如，下面我想说如果 .nav-wrapper 顶部位置为 0，则将 .header-wrapper-other 的 min-height 更改为 50px。这是我的代码，但目前它什么也没做：

var MenuPosition = $('.nav_wrapper').css('top').val();
if (MenuPosition == 0) {
    $('.header-wrapper-other').css('min-height','50px');
};

这是示例中两个 div 的 css：

.header-wrapper-other {
background-attachment: fixed;
background-size: cover;
min-height: 200px;
}

.nav-wrapper {
padding: 10px 20px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1000;
}

【问题讨论】：

也请分享您的 html 代码。如果您可以与您的问题陈述共享 jsfiddle 链接，那就更好了。
那么$('.nav_wrapper').css('top').val() 会返回什么？什么类型？

标签： jquery css

【解决方案1】：

应该是.css('top') 而不是.css('top').val()

但这会返回一个类似XXpx 的字符串，这可能不是你想要的。

您应该使用以下内容返回一个可用的数字进行比较

var MenuPosition = $('.nav_wrapper').position();
if (MenuPosition.top == 0) {
    $('.header-wrapper-other').css('min-height','50px');
};

DEMO

【讨论】：

【解决方案2】：

变成这样，

将您的类从 .nav_wrapper 更改为 .nav-wrapper 因为在 css 中您正在设置 .nav-wrapper 的样式，而在 jQuery 中您将其称为 .nav_wrapper :)

这里的工作示例http://jsfiddle.net/u6Lrnpgj/

var MenuPosition = $('.nav-wrapper').css('top');

if (parseInt(MenuPosition) == 0) {
    $('.header-wrapper-other').css('min-height','50px');
}

你不需要 val();它是从输入字段中获取值:)

【讨论】：

【解决方案3】：

.val() 仅适用于inputs 和textarea

您需要parseInt() 将MenuPosition 设为整数。

var MenuPosition = parseInt($('.nav_wrapper').css('top'));

【讨论】：