I think that this is a really simple question but I can´t get a solution by myself.
I have a fixed navigation bar in Bootstrap 3 and when I click in one of the nav items it scrolls down to the section with the proper ID. However, it goes all the way until the very beginning of the text. I would like to give it a little bit of space (padding) on top of the text, so i tis easier to read.
This is an example of what I am saying.
However, I would like it to scroll down until the start of the section, including the padding space I have. Like this:
So basically if I could set the menu to navigate to around 20 or 30px on top of the section that would be perfect, because I don´t want to add more padding or margins since that would put too much white space in the site when you are manually scrolling.
I think the section with the proper ID has margin-top: x, change it on padding-top: x. It should work.
I use a jQuery plugin to handle this offsetting of position. Check out Animated Scroll on github.
I don't have all the code to hand, but I use this to kick it off:
$('.btn--scroll-down').click(function () {
$(this).parents('.jsScrollPoint').next('.jsScrollPoint').animatescroll();
});
If you read the docs, you'll notice an option for padding - that's your offset.
Related
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.
When using a tumblr theme, I added an extra row for links, but the page won't automatically scroll. When changing the position to absolute, they scroll, but it doesn't show all the way, nor do the titles scroll. Can anyone help me out with this?
I'm not such what to change/add/remove to have the page scroll properly with the titles moving too.
The original code is here.
And here is the code once I added the last row.
The person who made the theme has deactivated their blog and their credit link leads to some odd site, so asking them for help isn't that easy considering I have no way of reaching them.
I suggest you go for a structure change. Currently because of position: absolute it is difficult to overflow the content in a standard way.
Ideally you should do the following
wrap the following series () in a parent
and style it to be on the right hand side and add the style
overflow: scroll to it.
remove the #columni {margin-left: 530px;} instead make it
display:inline-block;
remove the #columnsi{position: absolute;}
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}
I'm having a little trouble here: ..
Everything seems to work fine (had a small problem with the divs moving around when I resized the window but managed to fix it with a little help from the users of StackOverflow) but I have run into another problem now.
I'm using wordpress for this website with some modifications to a basic theme that I've made. Everything works fine except when you make the window quite small, the horizontal scrollbar appears but when you scroll the horizontal scroll bar you'll notice that the menu overlaps with the content.
How can I make it so that they don't overlap? I tried to make the position of the sidebar absolute instead of fixed, but the menu is supposed to stay there when I scroll vertically.
Not sure how I should go about this... any help would be appreciated!
Thanks!
As I said in my comment, you will need javascript to prevent the content div from overlapping the fixed menu
To point you in the right direction check out this
plugin on github .. its a great plugin using jQuery to accomplish pretty much exactly what you're after ..
Here is the working version using a small bit of jQuery, I hosted it so its easier for you to see:
The only change to the layout you need to make is to set the sidebar-primary div to left: 0; , it nudges that div very slightly to the left, but I think its worth it given that your original problem is solved with just a tiny bit of jQuery. Let me know if it works for your layout ..
I don't know how to formulate my question perfectly, so I made a (quick) example so will illustrate my problem exactly : http://jsfiddle.net/kn5GT/1/
If the last item is near the bottom and you hover it, the submenu will be displayed like the other, but this will extend the height of the page, thus showing the vertical scrollbar of the browser.
I'd like to avoid that by making all dropdown that would extend the height of the page by showing not from the up, but from the bottom (the bottom of the submenu would be near the end).
Is this possible only in CSS or do I have to put some js in it?
this might not be the best solution, but you could fix this with a little help of the css-pseudoclass nth-last-of-type().
I have modified your fiddle (the borders are just there for better visual distinction.)
I just added the following rule:
ul>li:nth-last-of-type(-n+2)>div {
top:auto;
bottom: 50px;
}
Don't get confused by the strange selector, essentially (-n+2) makes the last 2 Submenus pop up from the bottom instead from the top.