http://nickscarantino.ministryportfolio.com/ Is the website I'm working on.
My plan for it was to have a different "header" for each section (the navication on the top). I want those headers to stick to the top, and use anchors to scroll down the page. But the anchors end up jumping around the page.
For instance, when i click "history" it should scroll to the "history" anchor and keep that header at the top of the page. But sometimes when i click "history" (for instance- after clicking resume) it will scroll all the way to the top of the page, rather than where the history anchor is located.
How do i fix this?
Related
I have a webpage with a horizontal top sticky navbar 60px high.
On my page, I have links to locations on the same page with Link leading to id="someTarget"
My problem is that when the resulting link is clicked, the page scrolls to the target heading, but it is at the very top of the screen, behind my sticky navbar.
How can I specify that the scroll add a 60px cushion so that the target is at the top of the viewable area, not at the top of the screen?
So far I have just been manually adding in my id="someTarget" a few lines above what I actually want to be the target, but this seems a pretty imprecise way of doing it.
If you are okay with using a CSS framework for this, Bootstrap has what you need. There is an offset option that you could use.
So, I'm working on a page implemented with Bootstrap 4 and using anchor/hash-based navigation to take users up and down the page. What I'm unclear about is how to control what is actually in view when the page auto-scrolls to the anchor fragment?
Essentially, what I'm looking to do is somehow ensure that at least the section heading is visible, and more or less aligned to the viewport. I am using a fixed-top navigation bar
So, what determines what is "in frame" when an anchor is clicked and the page scrolls to the anchor location? Is this a question of keeping the anchor elements a certain size? So, in essence, what do I need to do via css or html to get section heading in view when they're clicked?
I'm putting together a horizontally scrolling layout to display nested content (think files within folders within folders ad infinitum). For purposes of graceful degradation, is there any way whatsoever to load the page initially scrolled all the way to the right, without JavaScript? It's easy to scroll it all the way to the bottom by adding <a id="foo"></a> to the end of the page and appeding #foo to the URL, but that doesn't seem to work horizontally.
Yep! Check out this fiddle. You can see that I'm using an anchor to reference an element way on the right of the page (the yellow div), and the browser is scrolling that element into view just as it would scroll downward to bring an element into view that was below the window's edge.
On the following website, www.josecvega.com, I have a navigation bar with years that link to sections on that same page. Unfortunately it is not working they way I hoped, when the user selects a year it moves to the section of the page and puts that section on the top of the page, I have a fixed div on the top of the page that covers the sections and prevents it from properly displaying. What can I do for this to work?
It hard to explain my situation, but it can be seen by going to www.josecvega.com and clicking one of the years.
Put your anchors earlier in the file. Perhaps use a fixed-height element (the same height as your header) in the margin just before each section and apply the anchor to that.
Or use a script run after the jump and scroll back down X pixels.
Or use a frameset to display the fixed header rather than the position:fixed div you are using now.
I would probably do the latter.
your header (class=bannercontainer") is position:fixed
so this element will not scroll.
if you now click on a year it scrolls the page behind the header.
probably position:fixed is not what you want
I currently have a site with a menu in a frame on the left and the content in a frame on the on the right. I want to move the menu frame to the top of the page (horizontal instead of vertical), but I want the menu to move up off the visible page when scrolling on a large content page, as though the menu was part of the content.
Note: I do not want to render the menu on the content page as all the current links target specific frames/windows and I would like to not have to render the menu on every request.
If you're asking whether it's possible to scroll a frame off the page, it is. Just use an IFrame. http://www.w3.org/TR/html4/present/frames.html
Just be aware that if you had lengthy dropdowns in your vertical frames, they may get truncated in a horizontal "menu" in an iframe of limited height.