0%

Hey! Do you have any query related to front end?

Sign in Sign up

Hanging menu on window scrollBack

Concept behind this:

Appending of menu from one to another as window scrolling value reaching beyond the addition distance of menu height and its top position value.

Html and css points to keep in mind:

  • Keep navigation menu inside a wrapper.
  • Write css for header drop down.

It is necessary to wrap menu, otherwise content will fluctuate due to append() and empty() functions of jquery.

jQuery script:

var headerNev_w, headerNev_h, menu_h, menuTopPos;
$(document).ready(function(){
	//HeaderNav outer width and outer height
	headerNev_w = $('.headerNav').outerWidth(true);
	headerNev_h = $('.headerNav').outerHeight(true);

	//Apply width to headerNav
	$('.headerNav').css('width', headerNev_w+'px');

	//Apply height to header
	$('header').css('height', headerNev_h+'px');

	//Get menuCon height
	menu_h = $('.menuCon').outerHeight(true);

	//Apply height to menuWrapper
	$('.menuWrapper').css('height', menu_h+'px');

	//Get menuCon Top pos
	menuTopPos = $('.menuCon').offset().top;

	//Call setRespMenu
	setRespMenu();
});

Applying own width in style to headerNav is required, because after adding fixed position it will take auto width. So this will not cover the container area and it will show as an icon.

Similarly, height of headerNav is required to assign the height of header tag, otherwise content will fluctuate. Similarly goes with menuWrapper, it takes menu height.

$('.menuCon').offset().top has been used to take top position of menu from document.

$(window).scroll(function(){
	setRespMenu();
});

$(window).scroll() returns scrolling value of window. During scrolling we have called setRespMenu() to arrange menu according to scroll change value.

//Define setRespMenu
var menuStat = false;
function setRespMenu(){
	var scrollVal = $(this).scrollTop();
	if(scrollVal >= (menu_h+menuTopPos) && menuStat == false){
		menuStat = true;
		$('.headerNav').empty().append('').append($('.menuCon')).addClass('activeStickey').css('top',0);
		var dropDown_w = $('.headerNav .menuCon').width();
		$('.headerNav .menuCon').css({'top': (headerNev_h+10)+'px', 'marginLeft':'-'+(dropDown_w/2)+'px'});
	}else{
		if(scrollVal < (menu_h+menuTopPos)){
			menuStat = false;
			$('.menuWrapper').append($('.menuCon'));
			$('.menuWrapper .menuCon').removeClass('activeDropDown').removeAttr('style');
			$('.headerNav').empty().append('

Navigation

').removeClass('activeStickey').css('top','-'+(menu_h+menuTopPos)+'px'); } } }

Here menuStat variable has been set to boolean to prevent unnecessary call of function. This variable set to true if window scroll reaches beyond addition of menu top value and menu height and again becomes false, if it becomes lower.

In if statement, we have truncate the header and appended span with bars and menu items and in else statement again we have restored the menu to its original position.

$(document).on('click','.barMenu', function(e){}); function is just to toggle the class from bars to cross and vise-versa and $(document).click(function(){}); function is just make dropdown menu hide if somewhere mouse has been clicked.

This is very useful in responsive.

How to comment:

  • Create an account in discuss by clicking on login next to arrow.
  • Create password for discuss and varify your email id, through your mail.
  • Refresh page and comment.

You might also like

  • Characters limit in textarea

    Limit charecters in textarea without extra space.

    • 278
    • 5
    • 278
    • facebook icon
    • twitter icon
    • google plus
  • Copy text to clipboard

    Copy text from browser to your clipboard and paste as per your requirement.

    • 302
    • 2
    • 302
    • facebook icon
    • twitter icon
    • google plus
  • Load images visible to user after page load

    Load only those image which is visible to visitor

    • 360
    • 8
    • 360
    • facebook icon
    • twitter icon
    • google plus

Latest quries posted

gopa kumarabout 3 years ago

amit singhabout 3 years ago

rahmat aliabout 3 years ago

mandavi tiwariabout 3 years ago

rahul sharmaabout 3 years ago

Ask question
Latest video
Learn Angular
Profile pic
Guest Back
Username
Password