Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cleanup botathon/index.php navigation panel script #157

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Cleanup botathon/index.php navigation panel script #157

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8951811
Changed nav script to use jquery/dom objects in array instead
Kenneth-W-Chen Apr 16, 2024
7c81cfa
Refactoring
Kenneth-W-Chen Apr 16, 2024
04a3e43
Nav initial active anchor is now set properly when page is already sc…
Kenneth-W-Chen Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
129 changes: 71 additions & 58 deletions botathon/index.php
View file
Open in desktop
Expand Up @@ -582,91 +582,104 @@ class="rd-parallax-layer section-top-75 section-md-top-150 section-lg-top-260">
footer(false);
?>
<script>
// var currentNav = "#nav-info"
// var currentAnchor = '#info'
var anchors = ['info','register','schedule','parts-list','teams','sponsors','contacts']
var curIndex = 0
var lastScrollTop = $(window).scrollTop()
let anchorSelectors = [$("#info"), $("#register"), $("#schedule"), $("#parts-list"), $("#teams"), $("#sponsors"), $("#contacts"),]
let navSelectors = [document.querySelector("#nav-info"), document.querySelector("#nav-register"), document.querySelector("#nav-schedule"), document.querySelector("#nav-parts-list"), document.querySelector("#nav-teams"), document.querySelector("#nav-sponsors"), document.querySelector("#nav-contacts"),]
let footerSelector = $('footer')
let curIndex = 0
let windowSelector = $(window)
let lastScrollTop = windowSelector.scrollTop()
const downTolerance = 0.25
const upTolerance = 0.5
$(window).scroll(navChange);

$(window).scroll(function(){
windoo = $(this)
let currentScrollTop = windoo.scrollTop()
let windowHeight = windoo.height()
let scrollBottom = currentScrollTop + windowHeight
function elementInView(elem)
{
let elemTop = $(elem).offset().top + parseInt($(elem).css('padding-top'),10)
var elemBottom = elemTop + $(elem).height()
return (elemTop <= currentScrollTop && elemBottom >= currentScrollTop) || (elemTop >= currentScrollTop && elemTop <= scrollBottom) || (elemBottom >= currentScrollTop && elemBottom <= scrollBottom)
}
function getTop(e){return $(e).offset().top + parseInt($(e).css('padding-top'),10)}
function getBottom(e) {return getTop(e)+ $(e).height()}
function switchActive(e,i){
$('#nav-'.concat(anchors[curIndex])).removeClass('active')
$('#nav-'.concat(e)).addClass('active')
curIndex = i
$(document).ready(function () {
// Add smooth scrolling to all links
$("#botathon-navigation ul li a").on('click', function (event) {

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();

// Store hash
var hash = this.hash;

// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {

// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
let scrollTop = windowSelector.scrollTop()
let scrollBottom = scrollTop + windowSelector.height()
for(let i = 0; i < 7; i++){
let anchor = anchorSelectors[i];
if(elementInView(anchor,scrollTop,scrollBottom)){
switchActive(i)
break
}
}
});

function navChange(){
let currentScrollTop = windowSelector.scrollTop()
let windowHeight = windowSelector.height()
let scrollBottom = currentScrollTop + windowHeight

function getTop(elem){return elem.offset().top + parseInt(elem.css('padding-top'),10)}
function getBottom(elem) {return getTop(elem)+ elem.height()}


if(currentScrollTop > lastScrollTop){ // scrolled down
if(curIndex!==6 && Math.floor(getBottom('footer'))<= scrollBottom)
if(curIndex!==6 && Math.floor(getBottom(footerSelector))<= scrollBottom)
{
switchActive('contacts',6)
switchActive(6)
lastScrollTop = currentScrollTop
return
}
if(getBottom('#'.concat(anchors[curIndex]))<= currentScrollTop +windowHeight*downTolerance){
if(getBottom(anchorSelectors[curIndex])<= currentScrollTop +windowHeight*downTolerance){
if(curIndex===6) {
lastScrollTop = currentScrollTop
return
}
for(let i = curIndex+1;i<7;i++){
if(elementInView('#'.concat(anchors[i]))){
switchActive(anchors[i],i)
if(elementInView(anchorSelectors[i]),currentScrollTop,scrollBottom){
switchActive(i)
break
}
}
}
} else{ // scrolled up
if(getTop('#'.concat(anchors[curIndex]))>=currentScrollTop+windowHeight*(1-upTolerance)){
if(getTop(anchorSelectors[curIndex])>=currentScrollTop+windowHeight*(1-upTolerance)){
if(curIndex===0) {
lastScrollTop = currentScrollTop
return
}
for(let i = curIndex-1;i>=0;i--){
if (elementInView('#'.concat(anchors[i]))) {
switchActive(anchors[i], i)
break
}
if (elementInView(anchorSelectors[i],currentScrollTop,scrollBottom)) {
switchActive(i)
break
}
}
}
}
lastScrollTop = currentScrollTop
});

$(document).ready(function () {
// Add smooth scrolling to all links
$("#botathon-navigation ul li a").on('click', function (event) {

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();

// Store hash
var hash = this.hash;

// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {

// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
}

function elementInView(elem,currentScrollTop,scrollBottom)
{
let elemTop = elem.offset().top + parseInt(elem.css('padding-top'),10)
let elemBottom = elemTop + elem.height()
return (elemTop <= currentScrollTop && elemBottom >= currentScrollTop) || (elemTop >= currentScrollTop && elemTop <= scrollBottom) || (elemBottom >= currentScrollTop && elemBottom <= scrollBottom)
}
function switchActive(i){
navSelectors[curIndex].classList.remove('active')
navSelectors[i].classList.add('active')
curIndex = i
}
</script>