dynamic margin? is it possible

  • Resolved losrack

    (@carlos-jaramillo)


    7 years, 11 months ago

    [ Moderator note: moved to Fixing WordPress. ]

    Hi,

    I have this page that I just did, and there is this element that has position:fixed. So it always stays in its place.

    I am using it to provide links to different parts of the page, with links to ids. The margin for this division is set just to be right after the navigation with negative margin. So far so good.

    Is there a way to adjust the margin again when the navigation is out of the screen so it can go closer to the top? … obviously when the navigation os off the screen?

    So far I have the desktop version of this page. It looks better on tablets and desktops or big screen cells. I am editing the mobile version but it is not ready yet.

    This is the page

    Thanks for reading !

Viewing 2 replies - 1 through 2 (of 2 total)

  • 1. First of all, assign an id to your sticky element for us to have something to work on.

    So its markup should be something like this:

    <div id="sticky-menu" style="float: left;width: 15%;height: 80%;position: fixed;z-index: 1;margin-top: -4em;border-style: solid;border-color: #c0c0c0;border-width: 1px;box-shadow: 2px 2px 5px #c0c0c0;overflow: auto;line-height: 0.9em;font-size: 10pt;background-color: #fff;">
<hr>
<p style="text-align: center;"><a style="color: #333333; font-weight: 300;" href="#online">Pagos Online</a></p>
....
</div>

    2. Next use some Jquery to detect when the navigation menu goes above the viewport

    <script>
	jQuery(window).scroll(function() { //animate elements on scrolling

		navMenuTop = jQuery('#site-navigation')[0].getBoundingClientRect().top; //get current top coordinate of the navigation bar
		navMenuHeight = jQuery('#site-navigation').height();
		
		//Detect whether the nav-bar has gone completely above the viewport
		if (navMenuTop < (-1 * navMenuHeight) )
			jQuery('#sticky-menu').addClass('pushedUpMenu');
		else
			jQuery('#sticky-menu').removeClass('pushedUpMenu');
	
	});
</script>

    3. Add this class to your CSS:

    .pushedUpMenu {
	margin-top: 5px !important;
	top: 0 !important;
}

    You are good to go now.

    Thread Starter losrack

    (@carlos-jaramillo)

    OMG it works.

    Thanks a lot !!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘dynamic margin? is it possible’ is closed to new replies.