使用 javascript 设置正文填充以移动到固定导航下方
Posted
技术标签:
【中文标题】使用 javascript 设置正文填充以移动到固定导航下方【英文标题】：Setting body padding with javascript to move below fixed navigation 【发布时间】：2017-12-24 19:06:19 【问题描述】：我进行了很多搜索，但找不到任何有用的东西。我正在开发一个顶部带有 Bootstrap 固定导航栏的 WP 主题。一切都很顺利，但是当我开始添加更多菜单项时，菜单高度扩大并开始覆盖内容。由于这是一个主题，其他人可能会开始在导航中放置大量链接，因此我需要一种方法将 body padding 设置为导航栏的高度。
这是 html：
<body class="page-template page-template-page-full-width page-template-page-full-width-php page page-id-42">
<header role="banner">
<div id="inner-header" class="clearfix">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid nav-container">
<nav role="navigation">
<div class="span3">
<a class="brand" id="logo" title="Just another WordPress site" href="http://corpuschristi2:8888/corpuschristi">
<img src="http://corpuschristi2:8888/corpuschristi/wp-content/uploads/2017/07/cc_logo_white.png" >
<!--<img src="" >-->
</a>
</div>
<div class="span9">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul id="menu-main-menu" class="nav"><li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/recent-news/">Recent News</a></li><li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-42 current_page_item active"><a href="http://corpuschristi2:8888/corpuschristi/test-page/">Full Width Page w/fi</a></li><li id="menu-item-119" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/full-width-page-wo-fi/">Full Width Page w/o FI</a></li><li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/sample-page/">Left Side Bar Page w/FI</a></li><li id="menu-item-118" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/left-sidebar-wo-fi/">Left sidebar w/o FI</a></li><li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/regular-page/">Regular Page w/ FI</a></li><li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/regular-page-wo-fi/">Regular Page w/o FI</a></li></ul> </div>
</div>
</nav>
</div> <!-- end .nav-container -->
</div> <!-- end .navbar-inner -->
</div> <!-- end .navbar -->
</div> <!-- end #inner-header -->
</header> <!-- end header -->
<div class="container-fluid">
<div style="position: relative">
<h1 class="title-over-image">Full Width Page w/fi</h1>...
任何帮助将不胜感激。
【问题讨论】：
【参考方案1】：你能抓住导航栏的高度并使用 jquery 设置填充吗？
$('body').css('padding-top',$('.navbar').height)
【讨论】：
谢谢。我会说我的JS有点欠缺。添加脚本的最佳位置在哪里？我需要把它放在一个函数中吗？ 我相信它只需要在您的$(document).ready(function() \\put it here )中的任何位置
我试过了，但没有用。这似乎应该是一件简单的事情，但我担心有什么干扰它。我是否需要注意 CSS 样式中可能冲突或覆盖它的任何内容？
不，javascript 应该能够覆盖 CSS。当你运行console.log($('.navbar').height) 时你会得到什么？
Uncaught TypeError: $ is not a function at :1:13【参考方案2】：
使用 jquery 设置填充。
在function.php中添加下面的函数
<?php
function myscript()
?>
<script type="text/javascript">
jQuery( document ).ready( function( $ )
jQuery('body').css('padding-top',jQuery('.navbar').height);
);
</script>
<?php
add_action( 'wp_footer', 'myscript' );
?>
【讨论】：
好的，我试过了，没用。我确实在文档末尾自动加载了 wp_footer，所以我也尝试将脚本放在头部但仍然没有。 CSS 样式中是否有任何我应该注意的可能会覆盖它的内容？ 好的，你可以根据分辨率大小使用响应式媒体查询css 在这种情况下，导航区域的大小与窗口大小无关。对于较小的屏幕，我已经让它崩溃了。问题是内容的数量，在这种情况下是链接的数量。我将把它传递下去，如果添加链接的人添加了足够多的链接以使菜单进入第二行，则导航区域会扩大并且内容会被掩盖。 在footer.php中添加java脚本： 【参考方案3】：<?php
function myscript()
?>
<script type="text/javascript">
jQuery( document ).ready( function()
jQuery('body').css('padding-top',jQuery('.navbar').height());
);
</script>
<?php
add_action( 'wp_footer', 'myscript' );
?>
【讨论】：
【参考方案4】：解决办法是：
$('body').css('padding-top',$('.navbar').outerHeight(true));
当高度设置为自动时，似乎仅使用 .height 会出现问题。使用 .outerHeight() 可以得到正确的值。
【讨论】：
以上是关于使用 javascript 设置正文填充以移动到固定导航下方的主要内容，如果未能解决你的问题，请参考以下文章
当它们移动以填充其他淡出的 div 留下的空白空间时如何为 div 设置动画