jquery: menu disappear on scroll reappear hover/mouseover/out -
I'm trying a menu below the endless scrolling page. I have a summary of this here when you scroll, I want to disappear the menu and then a hover / mouseover will appear again on the mouseout function. . I can not seem to work it out completely if you rotate with it, you will see that when you scroll, then move the mouse over it, it will come back. But if you scroll over that area with the mouse then it will slide down, then up, down, down, etc. This code looks messy and wakes out of the wack. In fact on a real page you have to reload it to work again.
Can anyone give some help with this?
Thanks
html
& lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> Br> Br> Br> & Lt; & Lt; & lt & lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> Br> Br> Br> & Lt; & Lt; & lt & lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> Br> Br> Br> & Lt; & Lt; & lt & lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; div class = "width" & gt; & Lt; / Div & gt; & Lt; div id = "bar" & gt; & Lt; / Div & gt; css
. With {width: 100%; Height: 60px; Background color: red; Background-image: url ('{image: background}'); Status: fixed; z-index: 1; Bottom: 0px; Text-align: center; Font: 12px Helvetica; Letter-distance: 2px; Change Text: Lowercase; Color: # 0f0f0f; line-height: 20px; } #bar {width: 100%; Height: 60px; Background color: transparent, bottom: 0px; Status: fixed; } jquery
$ (window) .scroll (function () {if ($ (this) .scrollTop () & lt; 10) { $ (".width"). stop (true, true). slidedown ();} and {$ ("width") slideup ();} $ (). ready (work () {$ ("# bar $ ("Width"). $ ("Width"). $ ("."); $ ("#bar", this) .mouseout (function () {$ ("width") .slideUp ("slow "};}}}}};});
Change your HTML to:
"Target =" new "style =" target-name: new; target-new: tab; "& gt; website & lt; / a & gt; a · & lt; a href = "/ Rss"> RSS A · & lt;! - #bar -> edit tell me that this is what you are doing:
$ (document) .ready (function () {$ ('.width'). Slidedown (), hovered = false; $ (Window) .scroll (function () (if ($ (window) .scrollTop ()> gt; = 10 & hovered === incorrect) {$ (".wid") .slideUp ();} and If (hovered === true) {$ ('width'). Show ();} and {$ ('width'). SlideDown ();}) ($ ('width'). (': Visible' ) And hovered === false) {e.preventDefault ()) ($ "width"); Sliding ("slow"); hovered = true;}}); $ ("#bar"). MouseLove (function (e) {if ($ (window) .scrollTop () & gt; = 10) {$ ("width") SlideUp ("slow"); hovered = false;} and {E.prerent default ( ); hovered = false;}});});
Comments
Post a Comment