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:

Comments

Popular posts from this blog

Java - Error: no suitable method found for add(int, java.lang.String) -

java - JPA TypedQuery: Parameter value element did not match expected type -

c++ - static template member variable has internal linkage but is not defined -