Question

我需要以下问题的帮助。

我正在创建一个自适应网站。它的结构非常基本：标题，导航栏，正文和页脚。

在标题中我有几个元素，所有这些元素都使用百分比作为维度，因此标题的 height 由其中元素的高度决定。

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

到目前为止，非常好。

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

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

我认为这是使用height();属性完成的，但我不是jQuery大师所以我不确定这是否有用。

非常感谢任何帮助。

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

Answer 1

$('#elementId').height()//Return height of element

Answer 2

您可以向浏览器的resize事件添加事件侦听器。

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

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

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

Answer 3

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

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，只需使用已有的CSS。 position: fixed使元素“粘在”屏幕上。

jQuery：调整窗口大小时检测元素的高度

3 个答案: