Question

我希望我可以链接到我的in-progess网站，因为很难将它归结为一个显示它且工作正常的JSFiddle。

所以这是：My website

现在，如果您尝试滚动，当您到达某个点时，标题/菜单会缩小，并固定在顶部，以便始终可见。现在，正如您可能看到的那样，问题是当标题变得固定时，“横幅”区域会轻微推动。因此，当过渡效果结束时，它是正确的距离。但由于“横幅”区域没有过渡，它会瞬间上升，这使得它不是很好。

我的问题是，如果我给那个“横幅”区域一个过渡效果，它会以0px的margin-top开始（当你在顶部时）。现在，当标题变得固定时，我必须考虑到不占用空间的说法。我可以通过给出“横幅”区域，当转换发生时，保证金最高为61px。问题是，正如你可能会看到的那样，如果我给出一个转换，它将从margin-top 0px变为61px，这意味着它将开始接近顶部，并且向下移动到正确的位置。实际上，它现在所做的跳跃，在开始时会变得更大，现在就是。

我用于固定位置标题的JS是：

<script>
    $(document).ready(function() {
        var s = $("header");
        var p = $('.pageWrapper');
        var pos = s.position();                    
        $(window).scroll(function() {
            var windowpos = $(window).scrollTop();

            if (windowpos >= pos.top) {
                p.addClass("stick");
            } else {
                p.removeClass("stick"); 
            }
        });
    });
</script>

标题和横幅区域的CSS是：

header {
    max-width:1920px;
    width:100%;
    height:91px;
    margin:0px auto;
    padding:0px;
    background:#ffffff;
    z-index:9999;
    -webkit-transition: height 0.4s ease-in-out;
    -moz-transition: height 0.4s ease-in-out;
    -ms-transition: height 0.4s ease-in-out;
    -o-transition: height 0.4s ease-in-out;
    transition: height 0.4s ease-in-out;

}

.stick header {
    position:fixed;
    top:0px;
    box-shadow:0px 4px 2px -2px #b32f01;
    z-index:9999;
    height:61px;
    -webkit-transition: height position 0.4s ease-in-out;
    -moz-transition: height position 0.4s ease-in-out;
    -ms-transition: height position 0.4s ease-in-out;
    -o-transition: height position 0.4s ease-in-out;
    transition: height position 0.4s ease-in-out;
}

.stick .bannerContentWrapper {
    margin-top: 61px;
}

.stick ul.nav li a {
    padding-top:30px;
    -webkit-transition: padding 0.4s ease-in-out;
    -moz-transition: padding 0.4s ease-in-out;
    -ms-transition: padding 0.4s ease-in-out;
    -o-transition: padding 0.4s ease-in-out;
    transition: padding 0.4s ease-in-out;
}

.stick .logo img {
    padding-top:7px;
    -webkit-transition: padding 0.4s ease-in-out;
    -moz-transition: padding 0.4s ease-in-out;
    -ms-transition: padding 0.4s ease-in-out;
    -o-transition: padding 0.4s ease-in-out;
    transition: padding 0.4s ease-in-out;
}

.top {
    max-width:960px;
    width:100%;
    margin:0px auto;
    display:table;
    background:#ffffff;
}

.logo {
    display:table-cell;
    width:30%;
    vertical-align: middle;
}

.logo img {
    padding-top:37px;
    -webkit-transition: padding 0.4s ease-in-out;
    -moz-transition: padding 0.4s ease-in-out;
    -ms-transition: padding 0.4s ease-in-out;
    -o-transition: padding 0.4s ease-in-out;
    transition: padding 0.4s ease-in-out;
}

ul.nav li a {
    display:inline-block;
    padding-top:60px;
    padding-bottom:10px;
    margin-left:15px;
    border-top:3px white solid;
    text-decoration:none;
    font-size:18px;
    color:#333333;
    -webkit-transition: padding 0.4s ease-in-out;
    -moz-transition: padding 0.4s ease-in-out;
    -ms-transition: padding 0.4s ease-in-out;
    -o-transition: padding 0.4s ease-in-out;
    transition: padding 0.4s ease-in-out;
}

.bannerContentWrapper {

    background-image:url('../images/orange-bg.jpg');
    background-position:center;
    max-width:1920px;
    width:100%;
    height:482px;
    margin:0;
    margin-top:0px;
}

所以是的，基本上，当我在滚动动作中达到某一点时，它会打开“棒”CSS

提前致谢。

Answer 1

删除

.stick .logo img

来自你的css的规则，并更改你的jQuery代码以包含这个：

if (windowpos >= pos.top) {

  p.addClass("stick");

  $( ".logo img" ).animate({
    paddingTop: "7px"
  }, 400);
}

过渡效应导致固定位置标题和边距问题

1 个答案: