简体   繁体   中英

Fixed DIV disables drop-down-menu

I'm quite new to the world of webdesign and are learning alot from trying different things.

So I'm trying to implement the idea of this Dock-When-Scroll solution and the basics works pretty well.

Then I added a html/CSS dropdownmenu (with few relative sub-links) within the absolute/fixed DIV and suddenly I can't click or hover the main buttons anymore. I've tried with different z-index values and combinations, adding absolute & relative positions to the menu itself And to make the menu itself the absolute/fixed element but i'm failing.

I've looked around for answers and scratched my head enough, I'm sure I'm overlooking something, the DIV is covering the menu somehow. Is there a rule with fixed elements that I'm missing?

Any help appreciated

Update 2

So after redoing the position-homework and tested various properties of this premade menu I've noticed there's a bugg with the hover. Is this possible?

Update 3

Okay I think I'll need some sleep, but basically the menu works in the default Static position and stops to work when "fixed" is turned on.

UPDATED SOLVED

Okay thanks for those who thought about the issue!

I succeded to figure out the problem alot easier with the jsfiddler so credit goes to Caramba :)

The code lied with my editing of adamJlev's solution of the clinging menu.

The problem-script:

             var $window = $(window),
           $stickyEl = $('#cssmenu'),
           $stickyEl2 = $('#bannerloggo'),

           elTop = $stickyEl.offset().top;
           elTop = $stickyEl2.offset().top;

           $window.scroll(function() {
            $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
            $stickyEl2.toggleClass('sticky2', $window.scrollTop() > elTop);
        });

The fix:

             var $window = $(window),
           $stickyEl = $('#cssmenu'),

           elTop = $stickyEl.offset().top;

           $window.scroll(function() {
            $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
        });

That easy.. So I'll read some more about Javascript.

Cheers

So I'm a newbie with this Stackoverflow-system, bear with me. I updated the question with explanation of the issue and the simple solution.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM