jquery - 使固定 div 停止在页脚处

Question

我知道这个问题还有其他解决方案，但我就是无法让它们发挥作用

我有一个固定在底部的 div。我希望当它到达#footer时停止

the site

有CSS，所以基本上我需要一个脚本，当它到达页脚边框时，将类从 .widget.widget_nav_menu 更改为 .widget.widget_nav_menu.fixed_button

这可能吗？

.widget.widget_nav_menu{
  background: none repeat scroll 0 0 #2E3337;
  bottom: 0;
  padding: 25px;
  position: fixed;
  right: 2%;
  color: #707480;
    font-size: 0.8em;
    opacity: 1;
    text-transform: uppercase;
}
.widget.widget_nav_menu.fixed_button {
  margin-right: -210px;
  position: absolute !important;
  top: -180px;
  background: none repeat scroll 0 0 #2E3337;
  padding: 25px;
  right: 2%;
}

Answer 1

StackOverflow 上有几个答案可以回答您的问题:JavaScript 是否可以检测页面是否已触底:

• Determining when JavaScript scrolled bottom of page
• How to Detect if browser window is scrolled to bottom

在上述内容的帮助下，您只需更改类即可:

<script>
$(function() {
    $(window).scroll(function(){

       //Cache the Footer Widget
       var $footerMenu = $('.widget.widget_nav_menu');

       //Check if it hits the bottom, toggle Relevant Class.
       if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight)
          $footerMenu.addClass('fixed_button');
       else
          $footerMenu.removeClass('fixed_button');

    });
});
</script>

演示 fiddle :http://jsfiddle.net/fVKZe/1/

要将其包含到 WordPress 设置中，您需要添加自定义 .js 文件并将其排队，直到 jQuery 作为依赖项加载到 WordPress 中。

stickymenu.js

jQuery(document).ready(function($) {
    $(window).scroll(function(){
        //The Above Footer Widget Code
    });
});

functions.php

function stickyfooter_method() {
    wp_enqueue_script(
        'stickymenu',
         get_stylesheet_directory_uri() . '/js/stickymenu.js',
         array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'stickyfooter_method' );