I'm using bootstrap. I want a div element to move as I scroll the page downwards. How do I accomplish this please? For instance, I want the div element to follow me downwards as I scroll downwards and still maintain its position
This can accomplished with functionality jQuery plugin.
See more on the API call here
This jQuery plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.
Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.
Using CSS, you can do it with the position attribute.
div{
position: fixed;
}
Related
So I have a container that has vertical scroll. Within this container I have x amount of inputs and if the user hovers over any of the inputs a tooltip will be shown hovering over on the rightside of input.
The issue that I am seeing is that the tooltips inside of the scrolling container can not have an absolute position that leaves the container. Meaning if the user scrolls over the top input the tooltip will cut off once it hits the top of the scroll container.
I have tried a bunch of things, but nothing seems to work to get this setup to work properly. Z-index does not seem to allow me to get out of the scrolling container.
Sorry this isn't a perfect example, but basically you can see that the tooltips are confined into scroll container:
http://cssdeck.com/labs/6aijimdf
Expected results:
I have a scroll area in which there is an absolute positioned element that will leave the scroll area when it overflows it.
Actual results:
I have a scroll area in which the absolute positioned element can not leave the scroll area when it overflows it.
Since tool tip container is position: relative and overflow: scroll, there is no way an position: absolute element can leave it.
I think a better way to achieve your expectation is using javascript to controll the tool tip element's position, and using position: fixed for that.
I'm trying to create a fixed navigation bar with buttons(aligned left) and a title(aligned right). Before i fixed the position to the top of the page, it works as intended (other than not moving when scrolling, obviously). However, when i fix the position of the header, it moves my title over to the left with the buttons. How can I fix this? I've tried to make it into a div inside of the header tag and position:absolute the div; didn't work.
Here is what my page looks like
Looking to create a fixed menu that starts in middle of webpage, but when scrolling down fixes to the top of the page using CSS/HTML.
Is it possible to do this using a container? So the container with the menu starts below a top container and when the top container is scrolled off the page the menu is fixed to the top of that container and the top of the screen?
For example, how can I make it so that the image in the second container stays at the top of the screen when scrolling down the page, but make it stay in the second container:
https://codepen.io/Daggett/pen/mpBaab
position: sticky;
<!--doesn't stick!-->
Is there a way to do this only with CSS? I know it can be done with jQuery
Thanks!
position: sticky needs an explicit vertical position like top:0 to know where to stick to.
I have a div that holds multiple draggable elements.
When I drag an elements to the right, the horizontal scroll bar appears and I can scroll the div. This is what it looks like:
However, when I drag the elements left, the horizontal scroll bar doesn't show. Example:
I have the overflow property set to auto.
I understand that this is the deafult behavior of the browser, and that not showing the scroll bar is "correct", however if anyone has any suggestions how to make the overflow also work when moving elements left, it would be greatly appreciated! TIA!
No. When you drag an element to the right you are increasing the page width and triggering a horizontal scrollbar. When you drag an element to the left, you are simply moving it off the page.
You might try dynamically increasing the page width based on how far the element has been dragged outside the left edge of the page.
The browser is working as designed.
I have a set of bootstrap nav-tabs and inside these tabs are nice long information sections. Problem is that our team does not want to have all this information on such a long tab so we have made the tabs container element have an overflow: scroll property. This works great but now we are stuck with an impossibly long inline scroll section and it would take a good 30-40 mouse scrolls to get to the bottom. This will lose us site traffic.
I know that the definition of being a fixed position is being fixed relative to the browser window but I am in need of a way to use bootstrap scrollspy nav-list menu inside of the parent div and not have it able to transverse outside of that div. So we need it the same way that the class="fixed-to-top" attribute works so that is a functionable nav menu but no matter what we try it seems that the fixed positioning always reverts back to being relative to the broswer.
Is it possible to do what we are trying to do?
The code below is not a complete implementation, but I hope it gives you an idea of how it could be done. I.e. change the position property if the fixed div goes outside of its parent/container.
var $nlm = $('#navListMenu');
$(window).bind('scroll', function(){
if($nlm.offset().top < $nlm.parent().offset().top)
$nlm.css({ position:'absolute', top:0 });
else
$nlm.css({ position:'fixed'});
}