当我的粘性菜单固定时，如何更改多个元素的 CSS 值？

Question

当页面加载时，我有一个位于页面标题下方的菜单，但我希望它在窗口向下滚动到菜单到达页面顶部时粘在页面顶部。我让这个功能完美地工作，但我也希望同时发生一些其他的变化；我希望固定徽标缩小以适应（现已修复）菜单的高度，就好像它在其中一样。

我几乎已经确定了所有 CSS 等，因为我的代码的各种迭代允许我测试单个元素的更改，但我正在努力让整个事情顺利地协同工作。

值得注意的是，该网站是响应式的，尽管我不确定这在寻找解决方案时会有多大的相关性。我遇到问题的菜单迭代是桌面/平板电脑大小的菜单，而不是移动大小的菜单。

我准备了一些小提琴来说明我的情况，其中一个的代码以非常粗略且不受欢迎的方式工作，而我认为即使在现阶段它还不是最终结果，它也会更接近最终结果。工作：

1. JSFiddle 的功能（有点）工作：http://jsfiddle.net/TdjXt/1/（为了让它工作，你可能不得不弄乱你的浏览器窗口大小并向下滚动到足够的粘性菜单参与）。

2. JSFiddle 演示了我当前的代码：http://jsfiddle.net/TdjXt/2/（此代码当前不起作用，但如前所述，我觉得这可能比其他示例更接近最终的结果。

以下是我一直致力于包含此功能的特定 Jquery 部分：

var stickerTop;
    var somethingelse;

    $(window).on("load resize", function(){

        stickerHeight = $('#sticker').height();
        stickerTop = parseInt($('#sticker').offset().top);
        somethingelse = parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top'));

        $(window).scroll(function(){

            if (somethingelse > stickerTop){
                $("#sticker").css({position:'fixed',top:'0px'});
                $(".logo").css({top:'3px', width:'127px', height: stickerHeight - 6});
                $(".logo img").css({float:'right'});
                $('#page').css('padding-top',stickerHeight + 20);
            }

            else {
                $("#sticker").css({position:'relative'});
                $(".logo").css({width: 'auto',height: 'auto', top: '17px'});
                $(".logo img").css({float:'none'});
                $('#page').css('padding-top','20px');
            }

        });

    });

谢谢:)

Answer 1

如果我理解正确你的意思（移动兰博基尼的标志而没有那种奇怪的标题效果），那么你可以尝试使用这个（复制自answer to question javascript - switch div from fixed to absolute at bottom of browser）：

$(document).ready(function(){
$('ul[id]').css('display', 'none');
$('.Menu').css('position', 'relative');
$('.Menu').css('min-height', $('.Menu ul').height() );
$('.Menu ul').css('position', 'absolute');

var Menu_InnerPosition = $('.Menu > ul').position();

if( $('.Menu').height() < $('.Content').height() )
{
    $('.Menu').css('height', $('.Content').height() );
}

if( $('.Menu').innerHeight() > $('.Menu > ul').height() )
{
    $(window).scroll(function(){
        var ScrolledDown = $(window).scrollTop();
        var NewPosition = ScrolledDown - Menu_InnerPosition.top;
        var RemainingSpace = $('.Menu').innerHeight() - NewPosition;

        if( $('.Menu').height() < $('.Content').height() )
        {
            $('.Menu').css('height', $('.Content').height() );
        }

        if(RemainingSpace > $('.Menu > ul').height() )
        {
            $('.Menu > ul').css('top', NewPosition);
        }
    });
}
});

在哪里

var Menu_InnerPosition = $('.Menu > ul').position();

在整个设计中从顶部说明它的意图

var ScrolledDown = $(window).scrollTop();

表示向下滚动了多少页面

var NewPosition = ScrolledDown - Menu_InnerPosition.top;

从顶部说新位置

var RemainingSpace = $('.Menu').innerHeight() - NewPosition;

表示滚动元素后面有多少可用空间（ul）

if(RemainingSpace > $('.Menu > ul').height() )
{
    $('.Menu > ul').css('top', NewPosition);
}

所有你需要改变的是，你需要与滚动一起移动的元素。