Сделайте фиксированную остановку в нижнем колонтитуле

0

Я знаю, что есть другие решения этой проблемы, но я просто не могу заставить их работать

У меня есть фиксированный div, который прилипает к дну. я бы хотел, чтобы я остановился, когда он попал в #footer

сайт

есть 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%;
}
  • 0
    ты хочешь спрятаться в низ
Теги:

1 ответ

3
Лучший ответ

Там есть пара ответов, всплывающих вокруг в StackOverflow, которые отвечают на ваш вопрос, если JavaScript может подвергнуться удалению, если страница попала в нижнюю часть или нет:

С помощью вышесказанного вы просто меняете класс, как только он имеет:

<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>

Демо-скрипт: 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' );
  • 0
    я должен поместить этот скрипт в мой заголовок?
  • 0
    Ваш сайт является сайтом WordPress (я думаю), поэтому вам нужно будет включить ваш JavaScript после загрузки jQuery (в настоящее время он загружается до загрузки jQuery в нижний колонтитул). Вы должны включить его в файл .js, а затем поставить его в очередь в functions.php.
Показать ещё 19 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню