McMaster-Carr, a few years back, completely redesigned their website and they now have these very cool 'scrolling box' sections for each product. I've been trying to duplicate that same effect only using css and html, but have had no luck so far.
Some key things I cannot accomplish using only html + css:
hidden scrollbars with the ability to still scroll
section headers that stop when scrolled to the top of a containing div
I've tried looking through their source code but I really want to start from scratch and recreate the effect, hopefully finding a much simpler way to recreate it.
If anyone has seen anything like this before or knows how to go about creating this type of layout, please help.
Here's a link to a page on the McMaster-Carr website that demonstrates that scrolling box layout:
http://www.mcmaster.com/#nylon-gears/=g1p46z
The technique j08691 linked to is the common way to do it - you'll have to use a bit of JS to find out where how much the site is scrolled. If you look at the source of the persistent header example, there is a line like
scrollTop = $(window).scrollTop()
simply replace this by the top position of your parent div (assuming it is, like in McMaster, fixed on the site)
scrollTop = $("div.MyParentDiv").position().top
Related
I'm making a website and want a navigation bar that stays at the top of the screen. I can do this fine but when I scroll to top it goes above header. How do I get it to stop scrolling with the user before the top of the page? I have watched countless tutorials but none seem to work. I think I need JavaScript to unstick the bar at a certain height, but unsure how. Also how do I restick it when the user scrolls back down?
Yes, you will need JavaScript to handle this. It is not too complicated, but you will basically need to add an event handler for the scroll event on the window, and inside the handler you can check the scrollTop of the window to see how much has been scrolled. When it has been scrolled "enough" (usually the height of your header) you can then switch the position of the header to fixed.
You can see a demo about it on the excellent CSS Tricks, and there are many tutorials and plugins that can help with this.
Yes, as danwellman said, you need js.
I have a small code I used in my webpage.
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
You need a file like "scrolling-nav.js" or anything you prefer. And in your html, don't forget to call it.
// In the end or in the beggining you call your js file
<script src="...(filepath)/scrolling-nav.js"></script>
There are many more cool possible snippets you can find. This is really to keep the navbar fixed after the offset of '51'. You can also add the smoothed movement to the webpage section after selecting a menu button.. If you have a onepage website, for example. This would also be js.
Good luck. :)
Never good to start off with an apology but please allow me to apologise for the terrible title of this post and also apologise for asking a question which has no doubt been asked countless times before. However, as I couldn't think of an appropriate title for this post you can image how well my searching went.
I'm looking to replicate the scrolling effect on the fitbit website where the section starts with "Get energized, take charge."
I have a rough grasp of what is happening here but don't have the smarts to piece it all together.
User scrolls page to this div.
JS calculates scroll position of this div and sets a class on the parent div which changes its state to fixed.
Child divs are now scrollable due to the change of state.
JS knows position of last child div, and when its at the top of the parent div, it removes class from parent and allows rest of the page to scroll normally once again.
I think I can calculate the second bullet point using something like
$(window).scrollTop()
And I can toggle the class on the parent easily enough. What I'm struggling to grasp is how the JS knows that the last child div has been scrolled and then organising that within the function to remove the class from the parent.
Any help would be greatly appreciated.
As a side note, I'm already using jcarousel on this project and if I could reuse existing code that would be great but I don't even know if this plugin can handle what I'm looking for.
I saw a site a month or two ago that had anchors fixed to the right side of the page that would not scroll when the page was scrolled. That alone is not hard to do with CSS.
But on that site, the fixed anchors were dynamically generated based on the section headers in the page. And they were proportionately spaced down the right side of the page in relation to their position in the document.
In essence, it created a mini-map of the entire document, giving a visual overview of what was in the document, and the spacing between sections of the document, all within the current viewport. You could quickly see how large each section was in relation to each other. Maybe I should call it a table-of-contents instead of a mini-map.
I believe this was on a documentation page for an API of some sort. I think it worked really well for navigation, and want to build something like it for some documentation I need to do.
In a way, it reminded me of the minimap on the right side of Sublime Text 2, but only major headings were shown and they were depicted as buttons fixed to the right side of the page.
Unfortunately, I can't remember or find the site I saw it on. Has anyone seen an example of something like this? I'd love to see some examples before I start implementing it. Or do any tools exist for doing this, jquery plugins, etc?
I have to design a layout for my project. There are arrangements of divs, upper Div, lower Div, fixed height, scrolling etc. It is difficult to describe the problem in words, hence I have attached an image below. Please refer the screenshots.
What I want to achieve is to arrange panels with respect to the overall height of the browser window. Pink module is absolute positioned at the bottom of the parent Div. Upper Div is precious sibling of pink Div and it contains panels. when browser is resized scrollbars should not appear in UpperDiv. Instead panels should show scroll (show in second).
It can be done using HTML and CSS and not at all I am hesistant using javascript or jquery. I appreciate any of your approach in doing this. Many thanks.
Sorry I couldn't made HTML properly. Currently my html shows scroll in upperDiv (instead scroll should appear in panels). Here I have created a fiddle. Please check.
here
Made some changes to the CSS, hope this is kinda what you are looking for.
http://jsfiddle.net/vCVUL/embedded/result/
Regards.
You could use ExtJS for this. Have look at the demo page. There you find "Layout Managers" how will do the job for you.
I can't think of a much better way than, after page load, setting the dynamic section's height.
And to handle the resize, we can just bind the same function with JQuery.
http://jsfiddle.net/N3HWz/7/
This is hard to explain but if you go here: https://developers.facebook.com/docs/reference/api/
You will see that BOTH the sidebar and header are fixed but because the height of the sidebar may be larger than the viewport it scrolls slightly until the user has been able to view all of it and then becomes fixed again.
My question is how could I do something like this with jQuery? I have built similar things using just CSS but would like to overcome the problem with the sidebar.
Thanks
Can't log into facebook but I think you mean something like this?
http://jsfiddle.net/b43hj/24/
If so, that's quick and dirty but should get you started. My have a few kinks to work out.