一页网站的背景反应导航 - 工作脚本

Question

早上好！

我想与您分享我为公司新网站制作的简单脚本。它允许您创建一个浮动导航栏，可以平滑地更改其背景。

目前它正在使用jQuery。我的问题是 - 是否有可能在纯CSS中做到这一点？我之前的想法是制作带溢出的导航容器：隐藏和位置：绝对+菜单，位置：固定。一切都运作良好，直到我意识到Firefox无法处理这种组合。

我等着你的想法：）

以下是代码和预览：

var nav = $('.nav'),
    navHeight = nav.height();

// Duplicate navigation
var navReversed = nav
    .clone(true)
    .addClass('nav-reversed')
    .insertAfter(nav);

var navs = $('.nav'),
    slides = $('.slide');

/* ... */

// onScroll event
$(window).on('scroll resize', function() {
    var scrollTop = $(document).scrollTop(),
        slide;

    // Find first visible slide
    slides.each(function() {
        if ($(this).offset().top > scrollTop)
            return false;

        slide = $(this);
    });

    if (slide.length) {
        var id = '#' + slide.attr('id'),
            slideNext = slide.next('.slide');

        var clipTop = clipBottom = 'auto';

        if (slide.hasClass('slide-reversed')) {
            clipBottom = Math.max(slideNext.offset().top - scrollTop, 0);
        }
        else {
            clipTop = navHeight;

            if (slideNext.length && slideNext.hasClass('slide-reversed')) {
                clipTop = Math.min(slideNext.offset().top - scrollTop, clipTop);
            }
        }

        if (clipTop !== 'auto') {
            clipTop = Math.round(clipTop) + 'px';
        }

        if (clipBottom !== 'auto') {
            clipBottom = Math.round(clipBottom) + 'px';
        }

        navReversed.css('clip', 'rect('+clipTop+',auto,'+clipBottom+',auto)');

        /* ... */
    }
}).trigger('scroll');

完整版：http://jsfiddle.net/greenek/NL7Fh/

Answer 1

您可以尝试复选框hack http://css-tricks.com/the-checkbox-hack/，还有：目标，但您不能高亮显示链接。 http://codepen.io/anon/pen/lqvpA