Question

http://communitychessclub.com/index.php is a long web page that uses a permanent position:fixed menu based on code from http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

But the menu contains links to ID’s in the same page, and when clicked, the fixed scrolling menu obstructs part of the . For example: http://communitychessclub.com/#official and you see the menu blocking the target article text. Note that I have and that’s the logical syntax and location I want.

Is there a way to modify the jquery below so that the page down scrolls 1″ to make the menu appear off the target article? I don’t care if the menu is covering the article above the target ID article.

CSS:
#sticky {margin:0 auto; display:table}
#sticky.stick {position: fixed;  top: 0; margin-left:48px; z-index: 10000; }

JS:

<script>
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top)
$('#sticky').addClass('stick')
else
$('#sticky').removeClass('stick');
}

$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>

Answer 1

This piece of JavaScript will work.

$(window).scroll((function() {
var a='',  // a buffer to the hash
w = $(window);
return function() {
    var h = location.hash;
    if (h != a) {   // if hash is different from the previous one, which indicates
                        // the hash changed by user, then scroll the window down
    a = h;           // update the buffer
    w.scrollTop(w.scrollTop()-100)
    }
};
})());