Question

我正在尝试调整padding-top，以便页面内容溢出基于菜单的高度，响应性地改变。我现在所做的不起作用：当菜单项折叠为两行时在小屏幕尺寸上，内容覆盖菜单，当然，菜单的第二行没有焦点。

<script>  
var heightHeader = $('.fixedheader').height();
$('.scrollcontent').css({ paddingTop : heightHeader + 30 + 'px' });
</script>

我错过了一些代码或误用了吗？非工作菜单和内容示例位于http://jsfiddle.net/r5a4ah7p

在我的个人HTML中，我在头标记内调用库（是正确的位置吗？）：

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

其他问题： 当javascript包含在html中时，它应该放在最后，例如，在适合内容之后？这就是最重要的网络示例显示。

许多TIA。 -murspieg

Answer 1

你没有在你的小提琴中加载jQuery。这是它无法正常工作的主要原因。另一个是你无法立即运行jQuery代码。运行jQuery的一种简单方法是从外部.js文件中加载它。

$(document)
.ready(function(){
    // Your jQuery js here
});

<script type="text/javascript" src="/path/to/file.js"></script>

我已经更新了你的小提琴： http://jsfiddle.net/javasluud/r5a4ah7p/2/

- 编辑 -

回复你的评论：

代码正在运行，但还有其他问题
最好将body末尾的脚本包括在内。

好的，我现在已经进一步研究了你的HTML和JS：

您在另一个.fixedheader内有.fixedheader个元素。在jQuery（$('.fixedheader')）中使用类选择器时，您将选择该类的所有元素。当你在它上面调用像.height()这样的函数时，你不能依靠你获得正确元素的高度。更好的方法是使用id（'<div class="fixedheader" id="fixedheader">和$('#fixedheader')）作为外部元素，其中一个要获得实际高度。

然而，这仍然无效。固定元素“存在于文档流程之外”。因此，在计算其父元素的尺寸时不考虑尺寸。因此，HTML中的外部.fixedheader实际上高度为0.没有理由让内部元素为fixed position。我在代码中删除了该类后，它就像一个魅力：http://jsfiddle.net/javasluud/r5a4ah7p/3/

此外，您错过了链接的"值附近的src。

使用JQuery基于另一个元素更改填充顶部

1 个答案: