早上好!
我想与您分享我为公司新网站制作的一个简单脚本。它允许你制作一个 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/
最佳答案
您可以尝试复选框 hack http://css-tricks.com/the-checkbox-hack/ ,也有 :target 但您无法突出显示链接。 http://codepen.io/anon/pen/lqvpA
关于javascript - 单页网站的后台 react 导航 - 工作脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24451400/