I tried to follow this tutorial to create an affix for my site, but there are a few things that are off and I'm having trouble figuring out why.
When scrolling, the width of the ul changes slightly, from 165-166px
After scrolling down, the affix doesn't stay at the top but remains fixed near the bottom of the page
The research li sometimes doesn't get highlighted at all
Here's my code: JSBin
What am I doing wrong?
From the bootstrap docs:
The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.
That should fix your issues with 1 and 2. With issue number 3, if you scroll too fast it will skip it because it is so close to the next anchor when compared with the height of the page. You could increase the spacing or add more content.
Related
I am working on building sticky sidebar behavior that will run alongside a vertical feed which is very similar to a facebook feed on desktop web. position: sticky works well for the easy use case where the sidebar is shorter than the height of the viewport. However if your sidebar is larger than the viewport the sidebar needs to have some scrolling mechanism so you can see the bottom of the sidebar as you scroll down the feed.
I am trying to recreate the facebook sidebar sticky scroll here.
The best way to understand the desired behavior is to test out your facebook feed and shrink your screen height so that your viewport is smaller than your sidebar height. I'll try to summarize here:
When your viewport is taller than your sidebar (simple case)
The sidebar behaves exactly as you'd expect with position: sticky. The sidebar stays in the same place and follows as you scroll down and up.
When your viewport is smaller than your sidebar
When you scroll down initially the sidebar scrolls with the feed (they appear fixed together)
When you get to the bottom of your sidebar, it then locks at the bottom and as you scroll down more, the sidebar now appears sticky with the bottom fixed
When you now scroll back up, the sidebar once again appears attached to your main feed, and scrolls up with the main feed. Once you hit the top of the sidebar it's then sticky with the top fixed.
So between those two states (top fixed when scrolling up, bottom fixed when scrolling down), the sidebar scrolls in unison with the main feed.
It's a very nice scrolling experience but very hard to recreate.
I have accomplished the states listed in steps 1-3 above by applying position sticky with a top position, and when you scroll down, using scroll events and some viewport/sidebar height calculations to determine the height difference and adjusting the top css value so it locks when the bottom is lined up with the screen (essentially initialTop - (sidebarHeight - viewportHeight). I cannot figure out steps 4, and 5. The best I could do was transition between the two top values depending on your scroll direction but it's a very bad UX.
I have a sandbox example of a layout here: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark
There's a basic layout with 2 columns (left sidebar and main feed). And there's a react component called StickyScroll which wraps around the column and has all the logic to update the top value. This may be a completely wrong start to a good solution, but any help is greatly appreciated.
I was interested in this as well, so I spent some time studying how fb does it.
It's very clever, my hat off to whichever fb dev originally implemented this.
You have to set the top / bottom css properties on the sticky depending on the direction of scroll, and to keep things from jumping around, you also have to calculate the height of an the element above the sticky, based on scrollTop.
Here is a rough example, which demonstrates the logic in action
I try to make a mock up by your sandbox code based on facebook redesign 2020.
hope you find the answer here. I like this approach because it's not very complex. More precisely, I use the css solution when I have to create a component similar to the Facebook sidebar.So i'm not using your StickyScroll component. Hope you find something.
Codesandbox Independent Scroll
On this page: https://www.ppai.org/members/certification/certification-programs/ we have added bootstrap accordion functionality to our panels.
The issue is that the content window does not expand when the accordions open, so at the bottom of the page, you end up with content hidden behind the footer.
I understand positioning and I'm sure that either a height is being set on one of the containers or something is getting changed to a fixed position. I've just pulled out most of the hair I have left trying to find which container is the culprit.
I was hoping to find a wizard here that could help me spot the offender.
Thanks!
I'm getting the hang of Bootstrap's affix but I have some difficulty because I am trying to use it to use position: fixed on a .row.
More precisely, what I am trying to do:
have a sum/total line always visible at the bottom of a scrolling list;
once you get to the bottom of the list, the sum/total line scrolls up to let the user see the content below (in my case, only the footer common across the rest of the site).
Here is a quick case that tries to reproduce my situation: https://jsfiddle.net/cyChop/wf8smye9/
As you'll see, the affix line displays well when you get to the bottom (.affix-bottom) but does not take the proper positions when in position: fixed (.affix-top and .affix).
I feel like I'm close and need only some light tinkering with the classes and CSS but I'm having difficulties finding out the clean and general solution.
You have to apply width of .affix like 100% or something.
Because when you set position:fixed then you have to apply width of that div.
JSFiddle link: https://jsfiddle.net/wf8smye9/3/
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.
The menu of the following website https://www.thedegreetracker.com/ has the following issue. The menu seems to be wider than the rest of the page. This is causing a horizontal scroll bar appear at the bottom of my browser's window. When one scrolls over (or maximizes the browser page on a very wide computer screen), it causes other parts of the page, such as the banner and the footer, to disappear when you scroll over.
By way of contrast, the following page does not have the same problem: https://www.thedegreetracker.com/about_us. This second page is how I want the first one to work in terms of the banner and footer resizing correctly, and no horizontal scroll.
As far as I can tell, the HTML and CSS code between the two pages is nearly identical. The differences I have found don't seem to make a difference. I have spent hours trying to figure out what is causing this issue and I am now asking for fresh eyes. I'm using Bootstrap 3 and Laravel, for what it's worth.
I'm hoping this is an easy fix that I'm just missing. You'll probably have more luck using Chrome Dev Tools on the actual web pages to figure this one out, but below is the HTML for both pages. As far as I can tell, the CSS is exactly the same for both pages.
Here's the code from the broken page with the wide menu and horizontal scrolling
view-source:https://www.thedegreetracker.com/login
Here's the code from the page with the menu, banner and footer that work correctly
view-source:https://www.thedegreetracker.com/about_us
The problem is the within the form, not the menu. You have wrongly used the container class (reserved by Bootstrap for setting width of page) inside your form.
Also, your form has a class of .container but you're overwriting the max-width property. This will likely cause responsiveness problems. Try not to touch width, max-width and min-width on classes that a framework uses for setting the width of content and layout, in general. If you must, use an inner-container.
Getting back to your problem, you should have probably used no class at all for your containers inside the form. As a rule of thumb, try to use class names that do not collide with the class names of your framework.
To fix your issue, either remove container from inside your form or, as a general patch for this type of error, add this CSS:
.container .container {
width: initial;
}