Question

我拼命想让目标div保持在我的浮动菜单栏下面。这样做的正确方法是什么？

$(document).ready(function () {
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        var target = this.hash;
        var t = $(this.hash).offset().top;
        $('.wrapper').animate({
        scrollTop: t,
        }, 800, function () {
            window.location.hash = target;
        });
    });
});

我尝试通过jquery .addClass添加填充和边距，但没有取得显着的成功。尝试重新定位div。什么都不能正常工作。

这是我为朋友http://rolfvohs.com/

做的实时测试网站

Answer 1

如果你需要一个div来坐在浮动div下面，你可以使用CSS：

在HTML

中创建一个class="clearfix"的div

<div class="clearfix"></div>

然后在CSS中定义这些属性：

div.clearfix {
    display:block;
    width:100%;
    clear:both;
}

尝试将新div放在浮动div的正下方。新div下面的任何东西都会低于它。

Answer 2

您可以通过向其添加负值来调整顶部位置。因此，你的滚动关闭200px只需调整你的功能;

    $(document).ready(function () {
        $('a[href^="#"]').on('click', function (e) {
            e.preventDefault();
            var target = this.hash;
            var t = $(this.hash).offset().top-200;
            $('.wrapper').animate({
            scrollTop: t,
            }, 800, function () {
                window.location.hash = target;
            });
        });
    });

没有其他代码，这是我最好的猜测。我实际上会考虑一个与你的滚动略有不同的功能。你的滚动功能看起来像是在Chrome中跳了一下。没有在其他任何东西上测试它，但也许是类似的东西;

    $('a[href^="#"]').click(function(){
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
            || location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name='+this.hash.slice(1) + ']');
                if (target.length){
                    $('html, body').animate({scrollTop: target.offset().top-200}, 800);
                    return false;
            }
        }
    });

单页锚点滚动。将锚目标div保持在我的浮动菜单下面？

2 个答案: