Моя проблема в этом. У меня есть фиксированная левая панель навигации, и я должен изменить цвет шрифта списка на основе фона раздела под ним. Код похож на эту скрипку . Поэтому, если раздел черный и находится ниже ссылки, текст не отображается. Я должен изменить каждый список на основе фона раздела под ним, чтобы он мог быть читаемым.
HTML
<div class="content"> <div id="left_side"> <div id="static_menu" class=""> <div id="main_navigation" class=""> <ul class="menu mainLeft" id="mymenu"> <li><a href="#section1">Nav list 1</a></li> <li><a href="#section2">Nav list 2</a></li> <li><a href="#section3">Nav list 3</a></li> <li><a href="#section4">Nav list 4</a></li> <li><a href="#section5">Nav list 5</a></li> </ul> </div> </div> </div> <div id="wrapper"> <div class="section" id="section1">section1</div> <div class="section" id="section2">section2</div> <div class="section" id="section3">section3</div> <div class="section" id="section4">section4</div> <div class="section" id="section5">section5</div> </div> </div> CSS
.content{ position:relative; } #left_side { position:fixed; left: 20px; right: 20px; z-index:999; } .mainLeft { list-style-type:none; margin-left:0px; padding-left:0px; } .mainLeft li { padding:5px 0; } .mainLeft li a { color:#000; margin-bottom:5px; } #wrapper { position:relative; } .section { width: 100%; text-align:center; padding:150px 0; border:1px solid #666; } #section1 { background: #fff; } #section2 { background: #000; color:#fff; } #section3 { background: #fff; } #section4 { background: #000; color:#fff; } #section5 { background: #fff; }4.content{ position:relative; } #left_side { position:fixed; left: 20px; right: 20px; z-index:999; } .mainLeft { list-style-type:none; margin-left:0px; padding-left:0px; } .mainLeft li { padding:5px 0; } .mainLeft li a { color:#000; margin-bottom:5px; } #wrapper { position:relative; } .section { width: 100%; text-align:center; padding:150px 0; border:1px solid #666; } #section1 { background: #fff; } #section2 { background: #000; color:#fff; } #section3 { background: #fff; } #section4 { background: #000; color:#fff; } #section5 { background: #fff; }5.content{ position:relative; } #left_side { position:fixed; left: 20px; right: 20px; z-index:999; } .mainLeft { list-style-type:none; margin-left:0px; padding-left:0px; } .mainLeft li { padding:5px 0; } .mainLeft li a { color:#000; margin-bottom:5px; } #wrapper { position:relative; } .section { width: 100%; text-align:center; padding:150px 0; border:1px solid #666; } #section1 { background: #fff; } #section2 { background: #000; color:#fff; } #section3 { background: #fff; } #section4 { background: #000; color:#fff; } #section5 { background: #fff; }
Fiddel
Чтобы сделать то, что вы просили, вы можете сделать это с помощью jquery:
рабочая скрипка
var _li, _sections; $(function() { _li = $("#mymenu").find("li"); _sections = $("#wrapper").find(".section"); $(window).on('scroll', liBgs); }); function liBgs() { for (var i = 0; i < _li.length ; i++) { var _litop = _li.eq(i).offset().top; for (var j = 0; j < _sections.length; j++) { var $s = _sections.eq(j), _sectop = $s.offset().top, _secbottom = $s.offset().top+$s.height()-20; if (_litop > _sectop && _litop > _secbottom) { var _color = rgb2hex($s.css('background-color')); _li.eq(i).find('a').css('color', (_color=="#ffffff") ? "#000000" : "#ffffff"); } } } } function rgb2hex(rgb) { rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); }
Я в основном сравниваю позиции меню с разделами, проверяя, в каком разделе каждый ли он переполняется всякий раз, когда вы прокручиваете. Я не уверен, что это очень эффективно, но для чего-то небольшого масштаба это нормально .. если кто знает, как чтобы сделать это еще более эффективным, я буду рад узнать.
Используется jquery для этого. Найдена ссылка здесь
HTML:
Добавлен дополнительный атрибут цвета
<div class="section" id="section1" data-color="#333">section1</div>
JS:
$(window).on('scroll', function() { var scrollTop = $(this).scrollTop(); $('.section').each(function() { var topDistance = $(this).offset().top; if ( (topDistance) < scrollTop ) { $('#mymenu a').css('color',$(this).attr('data-color')); } });
});
DEMO
Не можете ли вы просто дать нейтральный цвет фиксированному div и заставить его обернуть вокруг своего контента, а не прибегать к клиентским скриптам для динамического изменения цвета? Я немного очистил фиксированный элемент, чтобы сделать его более привлекательным … padding, marginins и т. Д.
#left_side { position:fixed; left: 20px; top:10px; z-index:999; background-color:#eee; padding:10px; }
Пример JS Fiddler
Что-то вроде этого будет работать:
$(window).scroll(function() { /* get current scroll-position within window */ var scroll = $(window).scrollTop(); $('.mainLeft li').each(function() { /* get position of navigation-element (distance from top minus half of it's height, so that it changes color while it's half over black and half over white background) */ var elementPositionTop = parseFloat($(this).offset().top) + (parseFloat($(this).height() / 2)); /* change color for each background-change */ if (elementPositionTop >= 320 && elementPositionTop <= 640 || elementPositionTop >= 960 && elementPositionTop <= 1280) { $(this).addClass('whiteText'); } else { $(this).removeClass('whiteText'); } }); });
Вот дополнительный CSS:
.mainLeft li.whiteText a { color: #fff; } .section { height: 18px; overflow: hidden; }
Я дал .section фиксированную высоту, потому что JS, который я использовал, работает с фиксированными значениями пикселей, и не все браузеры интерпретируют высоту элементов одинаково, если они не определены …
Вот скрипка: http://jsfiddle.net/Niffler/z34cG/
Обновлено .. см. Эту скрипку Do u Mean like this
$(document).scroll(function(){ var top=$(document).scrollTop()-322; console.log(top) if(top<0) { $('.mainLeft li a').css('color','black') $('#li1 a').css('color',$('#section1').css('color')) //$('#li1 a').css('color',"red") } if(top>0 && top<322) { $('.mainLeft li a').css('color','black') $('#li2 a').css('color',$('#section2').css('color')) //$('#li1 a').css('color',"red") } if(top>322 && top<644) { $('.mainLeft li a').css('color','black') $('#li3 a').css('color',$('#section3').css('color')) //$('#li1 a').css('color',"red") } if(top>644 && top<966) { $('.mainLeft li a').css('color','black') $('#li4 a').css('color',$('#section4').css('color')) //$('#li1 a').css('color',"red") } if(top>966 && top<1288) { $('.mainLeft li a').css('color','black') $('#li5 a').css('color',$('#section5').css('color')) //$('#li1 a').css('color',"red") } });часть$(document).scroll(function(){ var top=$(document).scrollTop()-322; console.log(top) if(top<0) { $('.mainLeft li a').css('color','black') $('#li1 a').css('color',$('#section1').css('color')) //$('#li1 a').css('color',"red") } if(top>0 && top<322) { $('.mainLeft li a').css('color','black') $('#li2 a').css('color',$('#section2').css('color')) //$('#li1 a').css('color',"red") } if(top>322 && top<644) { $('.mainLeft li a').css('color','black') $('#li3 a').css('color',$('#section3').css('color')) //$('#li1 a').css('color',"red") } if(top>644 && top<966) { $('.mainLeft li a').css('color','black') $('#li4 a').css('color',$('#section4').css('color')) //$('#li1 a').css('color',"red") } if(top>966 && top<1288) { $('.mainLeft li a').css('color','black') $('#li5 a').css('color',$('#section5').css('color')) //$('#li1 a').css('color',"red") } });