I'm trying to implement Affix navigation bar with bootstrap3, According to this example:http://www.w3schools.com/Bootstrap/bootstrap_affix.asp, When i scroll down slowly there's a little flick.I got think a lot, But i couldn't find any solution to fix that. This video shows exactly what i mean: http://sendvid.com/rf8t26hw .
How can fix that?
"flick" as you called is caused by element going from static to fixed position (element with affix class/functionality behaviour). That is causing DOM to move up as the affix element is not occupying the same height in the dom tree.
Solution for that is to have a wrapper around "affixed" element with minimum height declared (and matching the affixed element) so once the affix goes to position:fixed, wrapper would take his place in dom tree and hence eliminate the "bug".
Example code here
Related
What is the most reliable way to get the absolute position on screen of any element?
I have the problem that when an element above (parent) is added with my methods I can not get the absolute position of an element.
Context: I need to get the absolute position on screen of an element to check if my element which follows the finger (animation made with reanimated) intersects with that element which I can not get the absolute position from.
Methods I have tried:
event.target.measure
Here is the problem that I have a swipe element over the "drop box" and it just produces false positions.
ref.current.measure
This one works but not reliable. It fires about ten times in useEffect and produces only once the correct position.
Are there other things I can try which are reliable?
I do not understand why it is so hard to get the absolute position on screen not relative to the parent.
I am not sure how your code is connected, and not sure if you want to make this feature in hacky way but you can get the absolute position of the element from on layout property https://reactnative.dev/docs/view#onlayout
I need to be able to animate drag and drop in my vertical list. I used vuedraggable, wrapped my list in a transition-group and it all worked sweet. Until I fetch new data from the server. Now because of the introduction of transition-group for a split second the old data and the new data live together in the DOM causing the expansion of the list and pushing subsequent div down and back up.
This is kind of expected per the docs:
the DOM operations for insertion and/or removal will be executed
immediately on next frame (Note: this is a browser animation frame,
different from Vue’s concept of nextTick).
Regardless of being able to drag and drop the element, if we were to fade in/fade out the new/old elements they will co-habitate for the time of the animation, which is not great as seen in this pen
Anyway to fade out, change the data, then fade in the new one, while maintaining the height of the list?
Note that without fade the problem is still obvious:
Pen of my issue: click the switch data button to see the issue.
Turns out it's pretty know issue. By reading through this thread and toying with this example, i was able to achieve something to my liking by using:
list-leave-active {
display: none;
}
Resulting Pen
A css fix may be to wrap the contents within a box of some height and set overflow hidden.
So, even when new elements co-exist the jump in scrollbar can be avoided.
I have a navbar at the top of my website and it's fixed position. However, whenever you scroll down on the page, all of the content goes over the navbar instead of under it... how can I fix that? I assume showing my code won't help because if you know how to fix it you could probably just explain, but if you'd like to see my code just ask. Thanks.
I think you should post some code or a url. This could be as simple as setting z-index: -1 if the main part of the page is a sibling element of the navbar. Since z-index calculations depend on the parent child relationship of the DOM, knowing the relationship of the elements is necessary to answering the question.
I've found a rather interesting mishap here.
I have a negative margin on my navigation as I wanted it to sit specifically. All appears fine in FF, but in Safari my content is jumping up to where my nav is, as if my nav does not exist.
I tried playing around with the numbers, when I change it from -77px to -55 the content jumps where it's supposed to be (but obviously my nav does not).
Here's a link to my code via pastebin.
Any help is much appreciated!
Oh, the site is here
Thanks
You've got a few problems with the layout design of the site that are causing the problem, I think. It is having issues in Chrome as well.
First, your nav isn't contained in its own div, which doesn't really fit in with the design pattern you're following. Consider a redesign with the following:
div wrapper
div header
div nav
div content
div column1, etc
div footer
div wrapper (end)
This will give you much more control over the layout, and you'll make changes on the nav div instead of the ul. Your clearing divs aren't completely necessary as you're not floating any elements, but I think you're using them to create white space - either use margins or assign the nav element a height and your original issue should be resolved. I hope this helps.
I posted this a week or so ago:
Position simplemodal modal on top of an existing div
and thought that I had solved my problem, but when the window is scrolled, the modal container moves.
I think I need to change it from fixed to absolute positioning, but when I change it in the script, the right side of the container lines up with the left side of the div (but it does stay in the same place vertically).
Here's what I'm doing now:
$('.slider-caption #large-spot-two').click(function (e) {
$('#basic-modal-content-two').modal({appendTo:"#slider1", autoPosition: false});
return false;
});
What's the best way for me to keep the modal container above the div, whether the page is scrolled or not?
Thanks,
Wendy
The plugin was created to be fixed (not move when the page is scrolled, etc.). Changing the CSS position works until the page is resized or scrolled, as you have found.
The code required to change that behavior would require more work that I currently have time for. You might try BlockUI, as it sounds like that would fit your needs better?