Question

我需要制作这个粘性棒，而不仅仅是坚持顶部，但是随着CSS过渡，我的意思是顺利，因为它现在有点粗糙，任何提示都会很棒！本网站包含我想要的精确动画https://css-tricks.com/

这是CSS代码

#bar {  
    display:inline-block;
    width: 100%;
    height: 50px;
    max-height:50px;
    background-color: #595959;
    box-shadow: 0px 2px 2px #888888;
}
.bar-fixed {
    top: 0;
    z-index: 9999;
    position: fixed;
    width: 100%;
}

这是执行类添加的jQuery

$(document).ready(function() {

    $(window).scroll(function () {
        console.log($(window).scrollTop());
        if ($(window).scrollTop() > 59) {
            $('#bar').addClass('bar-fixed');
        }
        if ($(window).scrollTop() < 60) {
            $('#bar').removeClass('bar-fixed');
        }
     });
});

如果需要，我可以提供HTML ... 我尝试用这种方式进行CSS转换，但它没有工作，而且它是逻辑，因为类不是属性，所以我认为它可以用jQuery完成，但我＆＃39;我不确定。一个教程或课程，会很棒，所以我可以选择并学习我自己的选择，谢谢。

Answer 1

https://jsfiddle.net/VixedS/zket24av/ 的 CSS

Protected WithEvents mycontrol1 As Global.Mynamespace.Controls.MyControl

<强> JS

#bar { display:inline-block; width: 100%; height: 50px; max-height:50px; background-color: #595959; box-shadow: 0px 2px 2px #888888; } .bar-fixed { top:-100px; z-index: 9999; position: fixed; }

Answer 2

你需要过渡！

$('#bar').addClass('bar-fixed').slideDown();

$('#bar').removeClass('bar-fixed').slideUp();

Answer 3

您可以尝试使用JQuery制作动画，然后也更改该类，使其具有position: fixed

$( "#bar" ).animate({top: "0", otherStyle: "option"}, "slow");
$(".bar-not-fixed").attr("class", "bar-fixed");

通过这种方式，您可以将动画和将条形图保持在屏幕顶部的代码分开。

检查attr和animate

Answer 4

添加转换，但您还需要先隐藏元素，以便运行转换。

JS：

$(document).ready(function() {

    $(window).scroll(function () {
        console.log($(window).scrollTop());
        if ($(window).scrollTop() > 59) {
            $('#bar').addClass('bar-fixed').slideDown();
        }
        if ($(window).scrollTop() < 60) {
            $('#bar').removeClass('bar-fixed');
        }
     });
});

CSS：

#bar {  
    display:inline-block;
    width: 100%;
    height: 50px;
    max-height:50px;
    background-color: #595959;
    box-shadow: 0px 2px 2px #888888;
}
#bar.bar-fixed {
    display: none;
    top: 0;
    z-index: 9999;
    position: fixed;
    width: 100%;
}

Answer 5

嗯，这个问题有点令人困惑，因为css-tricks实际上没有粘性导航。

但是如果你的转换不顺利，可能是因为你没有更换它就把文件从文件流中取出。（导致页面向上跳跃。）

我建议使用StickyJs，但是如果你想自己编码，你基本上只需要制作一个空条形对象，当条形图不粘时，高度为0，条形高度为50px粘性

#bar-fake
{
    display:inline-block;
    width: 100%;
    height: 0;
    max-height: 0;
    background-color: #595959;
}
    #bar-fake.active
    {
         height: 50px;
         max-height: 50px;
    }

$(document).ready(function() {

    $(window).scroll(function () 
    {
        console.log($(window).scrollTop());
        if ($(window).scrollTop() > 59) 
        {
            $('#bar').addClass('bar-fixed');
            $('#bar-fake').addClass('active');
        }
        if ($(window).scrollTop() < 60) 
        {
            $('#bar').removeClass('bar-fixed');
            $('#bar-fake').removeClass('active');
        }
    });
});

Answer 6

尝试在JQuery中使用以下内容：

 $('#bar').wrap('<div class="bar-placeholder"></div>');

  $('.bar-placeholder').height($('#bar').outerHeight());

超级简单，请参阅工作示例CodePen

如何才能顺利地将css过渡到我的粘性条？

6 个答案: