javascript - 单页网站的后台 react 导航 - 工作脚本

Question

早上好!

我想与您分享我为公司新网站制作的一个简单脚本。它允许你制作一个 float 的导航栏，平滑地改变它的背景。

目前它正在使用 jQuery。我的问题是——是否可以用纯 CSS 来实现？我之前的想法是制作带有 overflow: hidden 和 position: absolute + menu with position: fixed 的导航容器。一切都运行良好，直到我意识到 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/ ，也有 :target 但您无法突出显示链接。 http://codepen.io/anon/pen/lqvpA