This is the following, I have a problem with the Scroll To method. I have a menu that uses position: fixed in css and when you click on it it anchors with the contents until normal if it were not for a problem. The menu has 152px height and as I do not handle so much of java script so the menu does not stay on top of the content I used padding-top in each content, only the client does not like it, so I come to appeal to you with the following question.
1 - Would it be possible when I click on a link in the menu, the javascript calculation decreases 152px so that all of it is on top of the content, not needing padding?
2 - Or else would it be possible when I click on a link instead of going to its corresponding content it go to the end of the content above it?
Here is the website address for link analysis and below the code used:
<script>
$(document).ready(function(){
/**
* This part does the "fixed navigation after scroll" functionality
* We use the jQuery function scroll() to recalculate our variables as the
* page is scrolled/
*/
$(window).scroll(function(){
var window_top = $(window).scrollTop() + 12; // the "12" should equal the margin-top value for nav.stick
var div_top = $('#nav-anchor').offset().top;
if (window_top > div_top) {
$('header').addClass('stick');
} else {
$('header').removeClass('stick');
}
});
/**
* This part causes smooth scrolling using scrollto.js
* We target all a tags inside the nav, and apply the scrollto.js to it.
*/
$("header ul a").click(function(evn){
evn.preventDefault();
$('html,body').scrollTo(this.hash, this.hash);
});
/**
* This part handles the highlighting functionality.
* We use the scroll functionality again, some array creation and
* manipulation, class adding and class removing, and conditional testing
*/
var aChildren = $("header li").children(); // find the a children of the list items
var aArray = []; // create the empty aArray
for (var i=0; i < aChildren.length; i++) {
var aChild = aChildren[i];
var ahref = $(aChild).attr('href');
aArray.push(ahref);
} // this for loop fills the aArray with attribute href values
$(window).scroll(function(){
var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
var windowHeight = $(window).height(); // get the height of the window
var docHeight = $(document).height();
for (var i=0; i < aArray.length; i++) {
var theID = aArray[i];
var divPos = $(theID).offset().top; // get the offset of the div from the top of page
var divHeight = $(theID).height(); // get the height of the div in question
if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
$("a[href='" + theID + "']").addClass("header-active");
} else {
$("a[href='" + theID + "']").removeClass("header-active");
}
}
if(windowPos + windowHeight == docHeight) {
if (!$("header li:last-child a").hasClass("header-active")) {
var navActiveCurrent = $(".header-active").attr("href");
$("a[href='" + navActiveCurrent + "']").removeClass("header-active");
$("header li:last-child a").addClass("header-active");
}
}
});
});
</script>