获取 position：固定侧边栏在页脚处停止（并将 JS 添加到 Wordpress）

Question

抱歉，如果这看起来很简单，但是我在这里真的很挣扎并且对 JS 很陌生，所以不确定我是否只是遗漏了一些东西！！！

页码： https://www.villaslegianbali.com/reviews/

我添加了侧边栏，让人们可以找到他们想要的评论。 但是，它出现在页脚上。 我现在尝试更改z-index （侧边栏为 0，页脚为 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)

Answer 1

请放在下面 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 );