0

我需要有关以下问题的帮助。

我正在创建一个响应式网站。它的结构非常基本：页眉、导航栏、正文和页脚。

在标题中，我有几个元素，所有这些元素都使用百分比来表示它们的尺寸，因此标题的高度由其中元素的高度决定。

对于导航栏，我计划使用“粘性”脚本，因此当您滚动页面时，导航栏会“粘”到页面顶部，一旦您一直向上返回，它就会“松开”并出现在标题下。

到现在为止还挺好。

问题是粘性脚本取决于标题的高度，以便正确地将导航栏粘贴在标题下方。因此，当我调整窗口大小以测试布局的响应性时，粘性导航栏会发疯。

我需要的是一种检测标题高度<header>并通过在ie上创建样式来修改 DOM 的方法。( <header style="height:198.3px">)，并在我调整浏览器窗口大小时为其分配动态高度。

我认为这是可以使用该height();属性完成的事情，但我不是 jQuery 专家，所以我不确定这是否可行。

任何帮助是极大的赞赏。

PS。顺便说一句，当您创建/编辑帖子时，Stackoverflow.com 会在右栏的框中使用此“粘性”功能。

4

3 回答 3

1 
$('#elementId').height()//Return height of element
于 2012-09-29T05:09:19.077 回答
1

您可以将事件侦听器添加到浏览器的调整大小事件。

$(window).resize(function () {
    // resize header here
    $("#header").css({
        height : $("#header").height()
    });
});

当您调整浏览器大小时，这将使用标题流体高度在标题上设置固定高度。

不确定这是否正是您要问的，但这演示了如何绑定到 resize 事件以及如何获取 DOM 节点高度。

于 2012-09-29T05:09:24.393 回答
1

这样的事情应该让你开始：

var $sticky = $('#sticky');
var $header = $('header');

$(window).scroll(function() {
    if ($(this).scrollTop() > $header.offset().top + $header.height()) {
        $sticky.css({
            top: 0,
            position: 'fixed'
        });
    } else {
        $sticky.css({
            top: 'auto',
            position: 'absolute'
        });
    }
}).trigger('scroll');​

演示：http: //jsfiddle.net/Blender/S66gR/2/

不要使用 JavaScript 复制 CSS，只需使用已有的内容即可。position: fixed使元素“粘”在屏幕上。

于 2012-09-29T05:26:32.760 回答