Я знаю, что есть другие решения этой проблемы, но я просто не могу заставить их работать
У меня есть фиксированный 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%;
}
Там есть пара ответов, всплывающих вокруг в 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' );