I am working in Angular Material and I am running into an issue when I use property: fixed. The bottom portion of the div that is fixed gets cutoff when I scroll all the way down to the bottom of the page.
here is the JSFiddle: https://jsfiddle.net/baiin/pp1ak0a7/
I've tried other solutions to fix this like using scrollTop() as an alternative to position: fixed, but it also produces the same bug. I think the solution is to check when I scroll if the bottom of the div is hitting the bottom of the page. However, I am unable to get a proper position for the div when it is being moved. I keep getting the same value. I need to find a way to get the position of this div relative to the entire page.
var offset = $("#scroll").offset();
console.log(offset.top); // doesn't give me relative position, just gives me constant value
Any input would help because I've been struggling with this problem for a while.
You can try this, may be it helps you
$(function() {
var getTop = $('#scroll').offset().top;
log(getTop - $(window).scrollTop());
$(window).scroll(function() {
console.log(getTop - $(window).scrollTop());
});
});
Best of luck :)
Related
Ok, I saw several examples of similar issues but didn't seem to answer my specific current issue. All I'm trying to do, is have the side nav use 100% height. I've tried numerous tries with height, float, position, and yet it still seems to only fill the rendered viewport on load. How do I get it to reliably stretch the full height of all content? You'll see what I mean if you just scroll down in the example below.
Example : Codepen
I've tried some things like;
position:absolute;
left:0;top:0;bottom:0;
.
float: left;
.
height: 100%
As I go through the process of kicking the dust off my web skills I occasionally get humbled like this. So if there's an exact duplicate I didn't find just let me know and I'll del this question. Thanks!
Have you tried using a fixed?
I tried it and the nav bar grew.
Or if you could use 200% or 300% might fit what you need
You can use jQuery to get the height of the page, and then set the nav to the height of the page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
<script>
$(function(){
var height = $(window).height();
$("#nifty-sidenav").height(height+"px");
});
</script>
give position:relative to the parent
in this case:
body {
position:relative;
}
I'm working on a couple of aspects of someone's website and I'm having a bit of an issue with getting the tabbed navigation to display properly without absolute positioning, and as it's set to absolute the text on the Details tab overruns the "footer" sometimes. (They use a random Testimonials block which pulls varied length quotes, the short quotes cause the overrunning. If it doesn't go over please just refresh)
http://goo.gl/5Iwc1r
Normally I would put this into a jsfiddle but to get the issue to display I would practically have to copy the entire css and html of the page, which wouldn't be very efficient and certainly not very clear to look through.
So, does anyone have any suggestions on the best way to approach this problem? All advice would be much appreciated.
I'm not 100% sure what you're trying to accomplish here. But I'll give it a shot...
Try adding a div underneath the tabbed navigation to act as a spacer, because of the way positioning acts upon screen real estate, this "spacer" div can keep things underneath it nice and tidy. Just set a height value to it to force the content to display where you would like it to.
Hope this helps :)
Because of the way you've structured your pages, it's not going to be easy. The content is places with a position: absolute;. This causes the content to not push down the footer, since the height isn't registered.
I think the fastest way to solve this, without having to rebuild half your website, is by using javascript. Since I see jQuery is loaded, I shall write this using jQuery.
jQuery(document).ready(function(){
setHeight();
jQuery('input[type="radio"]').on('click', function(){
setHeight();
});
});
function setHeight(){
jQuery('#wrapper').height('#wrapper > div > div').is(':visible').height());
}
This piece of code should set the div with id wrapper to the height of the currently visible div.
I haven't tested this, and it is no pretty solution, but it should work.
Good luck!
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'});
}
I currently have an image in a div that's set to fixed, and I like how its behaving, however I want it also to behave as if it's absolute when scrolling up and down. So in other words, I want fixed behavior horizontally, but absolute vertically (so that I add content to it and can scroll down and see the whole image).
Hopefully, I'm clear. Heres my html:
<div id="graphpaper">
<img src="Background2.jpg" />
</div>
My css:
#graphpaper{
position:fixed;
left:50%;
margin-left:-800px;
width:1600px;
height:1600px;
z-index:-10;
}
This is not an easy topic. The only way to achieve it is to use javascript. You have to 2 ways to do this.
Use position fixed and hook to windows scroll event and change the vertical position with javascript on scroll
Use position absolute (so the image scrolls with the window) and again with javascript on horizontal scroll change the horizontal location.
A basic example (it won't work, but this is what you need to start with):
$(window).scroll(function(){
$('#fixedImage').css('top', $(window).scrollTop());
});
Thanks for your help. I found the solution: This essentially will move the fixed div up (notice the negation sign in front of scrollVar) which will resemble an absolute scrollable behavoir.
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal >= 0) {
$('#graphpaper').css({'position':'fixed','top' :-scrollVal});
}
});
});
Is there a way to have a div extend to the bottom of the page no matter what the zoom is? I have tried to use fixed positioning and absolute positioning and I can't get the sidebar to extend just to the end of the viewable area?
Here is a screenshot of what I have so far. The scroll bar on the side only applies to the column on the right. I want that to extend to the bottom of the viewable area along with the map. This is on minimum zoom.
http://flic.kr/p/a5mEU7
I have made a jsfiddle version of your page at here.
I believe this is the solution you were after, be warned it may not work 100% in all browsers but it gives you a starting point.
-UPDATE-
The previous jsfiddle URL I gave was incorrect, just changed it to the correct one (got the original one wrong, sorry)