css - Floating menu jquery hover -
i got following floating menu on site:
$(function() { var nav = $('nav'); var nava = $('nav a'); /* var navaonhover = $('nav a:hover'); */ var navhomey = nav.offset().top; var isfixed = false; var $w = $(window); nav.css({ background: '#222' }); $w.scroll(function() { var scrolltop = $w.scrolltop(); var shouldbefixed = scrolltop > navhomey; if (shouldbefixed && !isfixed) { nav.css({ transition: 'all 0.30s ease-in-out', position: 'fixed', top: 0, left: nav.offset().left, width: nav.width(), height: 59, background: '#315d90' }); nava.css({ color:'#fff' }); /* navaonhover.css({ color:'#000' }); */ isfixed = true; } else if (!shouldbefixed && isfixed) { nav.css({ height: 50, position: 'static', background:'#222' }); nava.css({ color:'#fff' }); /* navaonhover.css({ color:'#000' }); */ isfixed = false; } }); });
in fourth, twenty 1 , forty 1 lines (marked @ start /* , @ end */) tried nav a:hover
responsible on mouse on when menu floats down.
not working, variable navaonhover
not nav a:hover
value.
how can make work in way or other ways?
it's important because if scroll down , later go up, hover
settings changed, , color #fff
stays either if hover or not.
if i'm not clear, @ demo - scroll page down , afterwards scroll up.
thanks.
try this:
<script type="text/javascript"> $(document).ready(function(){ $(function() { var nav = $('nav'); var nava = $('nav a'); var navhomey = nav.offset().top; var isfixed = false; var $w = $(window); nav.css({ background: '#222' }); $('nav a').hover(function(){ $(this).css({'color':'black'}) },function(){ $(this).css({'color':'white'}) }) $w.scroll(function() { var scrolltop = $w.scrolltop(); var shouldbefixed = scrolltop > navhomey; if (shouldbefixed && !isfixed) { nav.css({ transition: 'all 0.30s ease-in-out', position: 'fixed', top: 0, left: nav.offset().left, width: nav.width(), height: 59, background: '#315d90' }); isfixed = true; } else if (!shouldbefixed && isfixed) { nav.css({ height: 50, position: 'static', background:'#222' }); isfixed = false; } }); });}) </script>
Comments
Post a Comment