获得位置：固定侧边栏停在页脚（并将 JS 添加到 Wordpress）

Posted 2023-03-21

【中文标题】获得位置：固定侧边栏停在页脚（并将 JS 添加到 Wordpress）

【英文标题】：Getting a position:fixed sidebar to stop at footer (and adding JS to Wordpress)

【发布时间】：2021-05-26 14:25:16

【问题描述】：

抱歉，如果这看起来很简单，但我在这里真的很挣扎，而且对 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)

【问题讨论】：

我创建了一个 JS Fiddle - jsfiddle.net/scypb5en 我尝试了很多不同的 JS/JQuery 代码，但似乎都没有工作！

【参考方案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 ); 

【讨论】：

谢谢！！！ CSS 现在有侧边栏在页脚后面，但没有在上面停止。任何想法如何解决这个问题？