Apologies if this seems simple, but I am really struggling here and new to JS so not sure if I am just missing something!!!
Page: https://www.villaslegianbali.com/reviews/
I have added the sidebar to allow people to find the reviews they want. However, it appears over the footer. I tried changing the z-index
(sidebar to 0, footer to 99) for now, but even that isn't working.
When I try to save the below JS, it comes up with an error:
"Your PHP code changes were rolled back due to an error on line 325 of file wp-content/themes/villalegianbali/functions.php. Please fix and try saving again.
syntax error, unexpected 'var' (T_VAR), expecting end of file"
(line 325 is the first line of the JS above)
Code:
//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)
Please put below CSS
@media screen and (min-width: 980px) {
.footer {
z-index: 99 !important;
position: absolute;
}
}
We can't directly put Javascript in the functions.php file. To add JS first save in the.js file and include it in the functions.php file.
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] Put the below code in the functions.php file and check.
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 );
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.