I am using the latest release of bootstrap 3. I am using the affix plugin to make a static navbar fixed. It works however, there is a significantly long delay before the navbar updates and becomes fixed to the top. It is repeatable on all browsers.
I figured it would be easiest to show the problem with a video, I also provided some code.
see video
see JSFiddle
<h1></h1>
The effect I want is a clean instant transition like
this "http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_affix&"
I should also point out that I am using jQuery to define my section heights and the affix offset, I initially thought this would be causing the delay however, now I think that is out of the question.
This feels like a performance issue to me. I think jQuery is taking a little bit too long to figure out the height and apply the styling to the navbar.
I am hoping someone might have some insight into this matter.
So I figured out what the issue was.
I wrote used jQuery to get the height of the header (the content above the navbar) in this case it was a video, and made it the affix offset. The way I fixed my jumping issue is just make the offset property a function that calculated the height of the header instead of a static variable.
Here is the updated JSFiddle
https://jsfiddle.net/DTcHh/23013/
Related
I used display:none for one of sections so its visible only on devices with less than 576px. And anchors are wrong, and scrolling jumps from second to first section. How to fix it?
This is the
page
According to GitHub's plugin docs, this is still an open issue that needs to be fixed by the lib's developer. What he mentioned as a workaround is destroying fullpage.js and reinitializing it again without the faulty section. (Whenever you are going to do that is up to you to find appropriate, whether on screen width resize, page loads, etc etc)
Is it possible to use this style slider with md-grid-list?
Of course also allowing to scroll back.
What I have tried is to use a specified height with a Container div (To make it 1 line), but it only gives me a Y scrollbar which is expected, but how can I make it give me a horizontal scrollbar or just somehow make it work like youtube's?
Did you checked slick-carousel ?
On the demos tab, there's a really cool example on a similar output that you look for (called Responsive Display). And it's possible to use it with md-grid-list. Its quite simple to put it to use and it might be helpful on other situations.
I am doing an website where I have to keep one image fixed to the screen and on scroll I want different elements to appear one by one and stick to one position. When this is done I continue to the footer of the website.
I have done tried to reach that but whatever I do the page keeps scrolling and does not wait for all the elements to appear on the screen.
Example of what I want to do can be seen here Link on the second page where the mobile phone it is sticked in the screen and on scroll different content appear one by one.
How do I achieve this ? What kind of libraries would you suggest?
Thank you in advance.
stuff like this is usually done with js libriaries, as you already wrote. One that is actively supported and works quite well is Scrollmagic. It should be able to do what you describe, at least it can do the stuff in the example you linked: It can "pin" elements on the page for a defined duration (= "scroll duration") or animate elements controlled by the scroll position.
Scrollmagic can be found on Github or here: http://scrollmagic.io/ , examples to be seen here: http://scrollmagic.io/examples/index.html
Your fixed html content should have css position: fixed;.
Have you tried position: sticky? There may be browser compatibility issues but there are polyfils out there to fix that.
I am trying to set up a simple example with Bootstrap's affix.js.
However, the problem is that the item which I am trying to have sticky jumps off the screen with a negative top as soon as it switches from affix-top to affix. And it never recovers from there.
I set up a small jsfiddle, which illustrates the issue: https://jsfiddle.net/mjg12uep/6/
I have done it successfully on another project, but can't for the heck of it figure out what is going on here.
When playing around a little bit more, I realized that it works when I add position: relative to .affix-top. I suppose without that, the javascript was not sure where to "anchor" the element, and pushed it off screen. I have updated the fiddle accordingly.
A simple mobile landing page located here: http://happyappe.com/mms_Mobi
Not sure why, but when the About Us and Products pages are expanded the animation jumps past a certain point. Could anyone give me an idea as to why? Not all too familiar working with javascript.
Appreciate it.
I believe this is due to a known bug and the current workaround is to specify a solid width for the animated element. I tried setting one of your collapsible divs to 280px and the animation smoothed immediately.
Edit: Found what appears to be the bug ticket related to this issue
http://bugs.jquery.com/ticket/8370
The ticket has been closed and can't be fixed, the comment at the end reads:
Unfortunately there's not really anything that we can do on our end to divine the right height. Setting the width (as previously mentioned) will achieve the correct result - I recommend doing that in your scripts.