?
Solved

When element hits top of page - have at top

Posted on 2011-10-26
8
Medium Priority
?
185 Views
Last Modified: 2012-05-12
I have been trying to work with this code:

$(window).scroll(function() {
	var nav_ele = $('nav');
	var nav_coord = $('nav').offset();
	console.log($('header').scrollTop());
	
	if(nav_ele==nav_coord.top){
		$('nav').css('position','absolute');
	}
	
    $('nav').css('top', $(this).scrollTop() + "px");
});

Open in new window


I have this page -- goo.gl/kR946 -- the nav element with the discover and engage headlines will stay at the top when hits the top of the page (top:0)

I am thinking this.

1. Use window.scroll as as listener
2. Check via conditional - if the nav element hits the top, then switch the positioning to absolute and add z-index and all other properties
3. Then set the scrollTop to the top of the page.
4. When you scroll back it will RESET and be as if you came back on the page via refresh.

Any ideas?

Thanks,

Ryan
0
Comment
  • 4
  • 4
8 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37036667
Assuming you are using jQuery, you need to add some # $('#nav')

0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 37038120
Im using HTML5, so no need to add #.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37038187
But this is jQuery right? So you assign nav_ele to the jQury object and then later compares it to an attribute or property. That also does not look right
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 37038227
Yeah it is. I should have clarified about that conditional. I dont think that is the right way to do it and yes I see what you're saying.

I was trying to do:

when my element hits the top of the page switch to: absolute and top:0 to keep it at the top of the page, then when you scroll back return it to its original CSS properties (no absolute, etc)

Thanks,

Ryan
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37038271
Yes I do. Interesting. I'll have a look but hope others will chime in
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 37038380
Ok, thank you!
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 37039602
0
 
LVL 1

Author Closing Comment

by:catonthecouchproductions
ID: 37065396
Perfect solution!
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question