带有粘性导航的幻灯片切换答案

【问题标题】：slideToggle with a sticky nav带有粘性导航的幻灯片切换
【发布时间】：2014-09-21 10:03:56
【问题描述】：

我的实用工具栏和导航栏上方有一个促销区域，可以通过单击实用工具栏中的链接使用 slideToggle 显示和隐藏。

当用户向下滚动以使实用工具栏的顶部到达窗口顶部时，我希望促销区域切换到 display: none 并将整个标题（促销、实用程序和主导航）切换到有position: fixed。

Here is an example 我正在尝试实现的粘性导航效果，但这是否可以与使用滑动切换的元素结合使用？

JSFiddle
注意：灰色小框表示标题中的徽标，灰色大框表示页面内容。

【问题讨论】：

标签： jquery fixed slidetoggle scrolltop sticky

【解决方案1】：

你的意思是这样的吗？

如果是这样，我将继续并实现处理用户一直向上滚动

var $utility = $('#utility'),
$promo = $('#promo'),
$nav = $('header');

$(window).on('scroll', function (ev) {
    var $windowTop = $(this).scrollTop(),
        $utilityTop = $utility.offset().top;

    if ($utilityTop <= $windowTop) {
        $nav.css('position', 'fixed');
        $promo.css('display', 'none');
    }
});

DEMO

【讨论】：