Question

http://communitychessclub.com/index.php是一个使用永久排名的长网页：基于来自http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html的代码的固定菜单

但是菜单包含指向同一页面中ID的链接，单击时，固定滚动菜单会阻碍部分内容。例如：http://communitychessclub.com/#official，您会看到阻止目标文章文本的菜单。请注意，我有，这是我想要的逻辑语法和位置。

有没有办法修改下面的jquery，以便页面向下滚动1“以使菜单显示在目标文章之外？我不在乎菜单是否覆盖目标ID文章上方的文章。

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

这段JavaScript可以使用。

$(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)
    }
};
})());

Answer 2

该代码中未提供您想要的内容。

基本上，我们的想法是捕获click事件，获取要移动到的文章的id，找到该元素的position（）。顶部，然后将窗口移动到该位置 - 距离。< / p>

$('.js-css-menu a').click(function(e) {
    e.preventDefault();
    $(window).scrollTop($('#' + $(this).prop('href').split('#')[1]).offset().top - 50);
});

在控制台中看起来很不错。

调整下面的jquery，使页面向下滚动1“

2 个答案: