javascript - 获得位置:固定侧边栏停在页脚(并将 JS 添加到 Wordpress)
问题描述
抱歉,如果这看起来很简单,但是我在这里真的很挣扎并且对 JS 很陌生,所以不确定我是否只是遗漏了一些东西!!!
页面:https ://www.villaslegianbali.com/reviews/
我添加了侧边栏,让人们可以找到他们想要的评论。但是,它出现在页脚上。我现在尝试将z-index
(sidebar to 0, footer to 99) 更改,但即使这样也不起作用。
当我尝试保存以下 JS 时,出现错误:
“由于文件 wp-content/themes/villalegianbali/functions.php 的第 325 行错误,您的 PHP 代码更改已回滚。请修复并再次尝试保存。
语法错误,意外的 'var' (T_VAR),期待结束文件”
(第325行是上面JS的第一行)
代码:
//JS I added to the functions.php file:
var sideNav = document.querySelector('.sidenav');
var footer = document.querySelector('.footer');
function checkOffset() {
function getRectTop(el) {
var rect = el.getBoundingClientRect();
return rect.top;
}
if ((getRectTop(sideNav) + document.body.scrollTop) + sideNav.offsetHeight >= (getRectTop(footer) + document.body.scrollTop) - 10)
sideNav.style.position = 'absolute';
if (document.body.scrollTop + window.innerHeight < (getRectTop(footer) + document.body.scrollTop))
sideNav.style.position = 'fixed'; // restore when you scroll up
sideNav.innerHTML = document.body.scrollTop + window.innerHeight;
}
document.addEventListener("scroll", function() {
checkOffset();
});
.footer {
height: 243px;
z-index: 999 !important
}
.sidenav {
width: 180px;
position: fixed;
bottom: 0;
left: 30px;
background-color: #fff;
overflow: hidden;
padding: 10px;
}
<div class="sidenav-parent">
<div class="sidenav reviews-menu" style="position: fixed; float: left; bottom:0; margin-left: -30px; margin-bottom: 15px">
<h4 class="reviews-menu-title">Choose your Villa:</h4>
<a href="#karma" margin="0">
<h3 class="reviews-menu-item">Villa Karma Legian</h3>
</a>
<a href="#poppy" margin="0">
<h3 class="reviews-menu-item">Villa Poppy Legian</h3>
</a>
<a href="#aniela" margin="0">
<h3 class="reviews-menu-item">Villa Aniela</h3>
</a>
<a href="#segara" margin="0">
<h3 class="reviews-menu-item">Villa Segara Legian</h3>
</a>
<a href="#tropical" margin="0">
<h3 class="reviews-menu-item">Tropical House</h3>
</a>
<a href="#zakira" margin="0">
<h3 class="reviews-menu-item">Villa Zakira Legian</h3>
</a>
</div>
</div>
(content)
解决方案
请在CSS下方
@media screen and (min-width: 980px) {
.footer {
z-index: 99 !important;
position: absolute;
}
}
我们不能直接将Javascript放在functions.php文件中。添加 JS 首先保存在 .js 文件中,并将其包含在 functions.php 文件中。
For example. Follow below steps
1] Create a .js file as name scrollToTop.js
2] Put the below code in that JS file
var sideNav = document.querySelector('.sidenav');
var footer = document.querySelector('.footer');
function checkOffset() {
function getRectTop(el){
var rect = el.getBoundingClientRect();
return rect.top;
}
if((getRectTop(sideNav) + document.body.scrollTop) + sideNav.offsetHeight >= (getRectTop(footer) + document.body.scrollTop) - 10)
sideNav.style.position = 'absolute';
if(document.body.scrollTop + window.innerHeight < (getRectTop(footer) + document.body.scrollTop))
sideNav.style.position = 'fixed'; // restore when you scroll up
sideNav.innerHTML = document.body.scrollTop + window.innerHeight;
}
document.addEventListener("scroll", function(){
checkOffset();
});
3]将以下代码放入functions.php文件并检查。
function villas_adding_scripts_for_scroll() {
wp_register_script('villas_scrolltop_script', get_template_directory_uri() . '/scrollToTop.js', array('jquery'),'1.1', true);
wp_enqueue_script('villas_scrolltop_script');
}
add_action( 'wp_enqueue_scripts', 'villas_adding_scripts_for_scroll', 999 );
推荐阅读
- python - 基于python脚本的django自定义命令
- python - 将索引值移动到熊猫数据框中的列名中
- python - 从变量中插入 sqlite3
- xcode - Spritekit FPS 掉落问题
- matlab - 如何在 Matlab 中使用 R-Tree 进行 knnsearch
- javascript - 根据选择框隐藏部分
- java - 获取 pdf 时播放资产交付不起作用
- docker - Kubernetes:来自服务器的错误(未找到):未找到 deployments.apps “kube-verify”
- jupyter-notebook - Jupyter 密码未经过哈希处理
- shell - 获取日期范围内所有行的列表