I took a 1 page parallax scrolling template but I added more pages so it's not just a 1 page site anymore.
I figured out how to jump to the html anchors on the home page when your on a separate page. But now I have an offset issue that I just can't figure out.
The page is https://zoopyo.com - just click pricing or features and you'll see that the title gets cut off. The scroll just needs to be about 90px up. Which is the size of the sticky header. If the sticky header wasn't there it would be fine. So I just need to figure out how to offset it by 90px from the anchor. If that is even possible?
I can't seem to load the website but from what I understand, the navbar is covering some content on top.
my suggestion would be to make an empty/dummy div at the top of the page with the same height as your navbar, then set your to the dummy div, while maintaining the label of the first real div.
something like this:
<li>top</li>
where dummy is empty and set to the height of your navbar
see this jsfiddle I made, the "hello world" is not covered by the navbar
http://jsfiddle.net/49AtS/1/
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.
I've noticed on sites like The New Yorker that when on mobile if you scroll to the very top and continue to scroll upwards the navbar stays firmly attached to the top of the window. On my site, the navbar stays connected to the rest of the content when I scroll up and continue past the body of the page. How would I go about emulating what The New Yorker does. I have looked at their page's css but can't seem to tell what gives that functionality. Any help would be appreciated.
setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?
So when I scroll down from the landing page it sticks at the next section. I'm not sure whats happening. There's also a white bar at the bottom of my site that i can't get rid of. How do I fix a scrolling that seems to "stick" when it goes over a certain section and how do I fix white space at the bottom of my footer? Here's a link a github I created to show what I'm dealing with, too much code to copy and paste here to get a good answer
https://github.com/OakHarbor/mapletest
I checked the site, and the problem is you are using a BIG really BIG images in the background, images like "wood1.jpg" has a resolution of 6000x4000px this is a lot the other image "wood2.jpg" has almost 8200x5500px, just this image has 12mb this is like 4 times what a whole page should have of size, so when you're scrolling the page this images start to load so the "sticks" is the page suffering to load.
Your imagens should be something like 800x400 or even less and don't forget to optimize them there is tools in the web that remove all the unecessary meta information check here https://imagecompressor.com
And your "white bar" is that you set a id in your tag html "noScroll" and this css was apply to it, basicly this alow you to acess the content with scroll bars, if you don't need this feature just remove it that the white bar will disappear
#noScroll {
overflow: scroll;
}
For Stick Problem
Please keep the fixed background to scroll.
For Footer White bar
If you want to remove the white bar from the footer, please remove top: -50px from #footer id and use of margin-top: -50px instead of this and now It will be fixed.
I am trying to create a layout that has a fixed header that always shows at the top. Additionally a side bar that will have a scroll bar next to it if the content goes past the browser height. Same with the content to the right of the side-bar, I would like it to have its own scroll bar that does not go past the browser height.
Please see this site for an example of what I am looking for. It has all 3 features.
I have tried so many things. Without the fixed header I can get it working by simply making everything height: 100%. But with the fixed header something is going on where the sidebar and content pane scroll bars go way below the browser view.
I feel like I am getting somewhere when I add padding-bottom: 64px; to the items I want to have the scroll bar. The 64px is the height of the header.
Please go through the documentation and tutorial of Bootstrap and you will be able to do it.
For reference go through this JSFiddle: https://jsfiddle.net/jxo6pmju/12/
link = https://jsfiddle.net/jxo6pmju/12/
For scrollbar go through this : https://jsfiddle.net/vrzjLc77/1/
link = https://jsfiddle.net/vrzjLc77/1/
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