Position Fixed / Absolute menu using jquery to sit in middle of section

Rich

I have a responsive single page website that contains a featured slider area plus 4 sections of content. I have created a floating menu that allows users to navigate to each section. On page load I want to the menu to sit positioned absolutely in the middle of the featured slider area on the left. (The menu is only visible for desktop)

On scroll down once the menu is 134px from the top of the page I change the menu to become fixed so that it sits in the same place as the user views each content section (at the top of the content).

I have created a jsfiddle with the example. http://jsfiddle.net/VZL3K/5/

Currently it breaks when I do the following:

1.Click a section in the menu so that is scrolls down, resize the browser then scroll up. The menu doesn't stop at the middle point of the feature area.

  1. If I scroll down, refresh the page, then scroll to the very top.

Currently I am struggling with the logic of how this needs to be assembled.

1.Find the middle point of the featured area and set the menu position to sit there if user is at the top of the page. 2.On scroll down, check when the menu is 134px from the top and set as fixed. 3.On scroll up, if it is inside the featured content area stop when it reaches the middle point, otherwise stay at 134px.

// Menu Position
$(function() {
function fixedMenu() {
    var featureMiddleSpot = (($(".feature-slides").height()/2) - ($("#main-menu").height()/2) + ($("header").height()));

        if ($(document).scrollTop() < 134 ) {          
            $("#main-menu").css({
                "position" : "absolute",
                "top" : featureMiddleSpot
            });
        }       

    $(window).scroll(function() {
        if ($(document).scrollTop() >= featureMiddleSpot - 134) {
            $("#main-menu").css({
                "position" : "fixed",
                "top" : "134px"
            });
        } else {
            $("#main-menu").css({
                "position" : "absolute",
                "top" : featureMiddleSpot
            });
        }
    });
}   

fixedMenu();    
$(window).resize(function(){
    fixedMenu();
});
});

I hope this makes sense!

Thanks so much!

CoolArts

Ok you only need to change a variable from distance1 to featureMiddleSpot

if ($(document).scrollTop() >= featureMiddleSpot - 134) {
    $('#main-menu').css({
        'position' : 'fixed',
        'top' : '134px'
    });
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Unable to use jquery to change body, html position: fixed to position: absolute

From Dev

Position absolute but with fixed scrolling

From Dev

position absolute inside position fixed

From Dev

Why does setting 50vw or 50% on an element with position absolute/fixed not set it exactly in the middle?

From Dev

Apply position absolute style using JavaScript / jQuery

From Dev

jQuery .on('click') issues when using position absolute

From Dev

CSS: postion fixed into position absolute

From Dev

Fixed Menu Position

From Dev

Drop down menu not visible at all when using position absolute

From Dev

jQuery Fullpage - Show current section position with horizontal line on menu

From Dev

Getting position fixed elements using JS / jQuery

From Dev

section position: fixed overlaps footer

From Dev

Fixed position element inside absolute position element

From Dev

Fixed position element inside absolute position element

From Dev

How to make a fixed menu/sidebar while using position:relative?

From Dev

Overflow hidden and position absolute menu

From Dev

Getting Text to sit over a video tag without using absolute positioning

From Dev

position absolute div from middle instead of edges

From Dev

position: absolute and vertical-align: middle

From Dev

content to sit in the middle of div

From Dev

Fixed Position Menu modification guidance

From Dev

Fixed position menu and internal links?

From Dev

Fixed position menu and internal links?

From Dev

"position:fixed" Not Working For Header Menu

From Dev

Menu bar with position fixed not working

From Dev

Fade and translate the "position:absolute" element from top to bottom using jquery

From Dev

How to add !important in position:absolute using jQuery.css() function?

From Dev

jQuery scroll left is not working when using position absolute?

From Dev

How to add !important in position:absolute using jQuery.css() function?

Related Related

  1. 1

    Unable to use jquery to change body, html position: fixed to position: absolute

  2. 2

    Position absolute but with fixed scrolling

  3. 3

    position absolute inside position fixed

  4. 4

    Why does setting 50vw or 50% on an element with position absolute/fixed not set it exactly in the middle?

  5. 5

    Apply position absolute style using JavaScript / jQuery

  6. 6

    jQuery .on('click') issues when using position absolute

  7. 7

    CSS: postion fixed into position absolute

  8. 8

    Fixed Menu Position

  9. 9

    Drop down menu not visible at all when using position absolute

  10. 10

    jQuery Fullpage - Show current section position with horizontal line on menu

  11. 11

    Getting position fixed elements using JS / jQuery

  12. 12

    section position: fixed overlaps footer

  13. 13

    Fixed position element inside absolute position element

  14. 14

    Fixed position element inside absolute position element

  15. 15

    How to make a fixed menu/sidebar while using position:relative?

  16. 16

    Overflow hidden and position absolute menu

  17. 17

    Getting Text to sit over a video tag without using absolute positioning

  18. 18

    position absolute div from middle instead of edges

  19. 19

    position: absolute and vertical-align: middle

  20. 20

    content to sit in the middle of div

  21. 21

    Fixed Position Menu modification guidance

  22. 22

    Fixed position menu and internal links?

  23. 23

    Fixed position menu and internal links?

  24. 24

    "position:fixed" Not Working For Header Menu

  25. 25

    Menu bar with position fixed not working

  26. 26

    Fade and translate the "position:absolute" element from top to bottom using jquery

  27. 27

    How to add !important in position:absolute using jQuery.css() function?

  28. 28

    jQuery scroll left is not working when using position absolute?

  29. 29

    How to add !important in position:absolute using jQuery.css() function?

HotTag

Archive