Question

我正在使用这个演示我的项目。 http://tympanus.net/Development/ArticleIntroEffects/index3.html

滚动后我想做固定菜单。我使用这个js但它不起作用。

    function fixDiv() {
        var $cache = $('#codrops-demos');
        if ($(window).scrollTop() > 100)
            $cache.css({'position': 'fixed', 'top': '10px', 'display': 'block'});
        else
            $cache.css({'position': 'relative', 'top': 'auto', 'display': 'none'});
    }
    $(window).scroll(fixDiv);
    fixDiv();

我该怎么做？

Answer 1

codrops-demos是一个类，而不是ID，因此您应该使用.codrops-demos而不是#codrops-demos。

不确定这是否足够。

Answer 2

这是你在找什么？

http://jsfiddle.net/Pa36p/5/

JQuery（JS）

function fixDiv() {
    var $cache = $('#codrops-demos');
    if ($(window).scrollTop() > 100) $cache.css({
        'position': 'fixed',
        'top': '10px',
        'display': 'block'
    });
    else $cache.css({
        'position': 'relative',
        'top': '110px'
    });
}
$(window).scroll(fixDiv);
fixDiv();

当窗口滚动小于display时，您将菜单的none定义为100px。因此，菜单不会显示。如果您尝试执行Codrops示例中的操作，只应在滚动大于菜单与屏幕顶部之间的距离时修复菜单。

清理代码

这是您所做代码的更简单，更易读的版本，通过使用CSS来利用浏览器的javascript处理。

http://jsfiddle.net/Pa36p/8/

JQuery（JS）

function fixDiv() {
    var $cache = $('#codrops-demos');
    if ($(window).scrollTop() > 100)
        $cache.removeClass('relative').addClass('fixed');
    else
        $cache.removeClass('fixed').addClass('relative');
}
$(window).scroll(fixDiv);
fixDiv();

CSS

.fixed{
    position: fixed;
    top: 10px;
}
.relative{
    position: relative;
    top: 110px;
}

滚动页面时，固定的div不起作用

2 个答案:

清理代码