CSS transitions - Switching between fixed and absolute positioning - javascript

I'll try to explain a big problem that has me stumped.
Basically, I have a #menu that goes between absolute positioned(when close to the top of the page) and fixed positioned(to the top of the window, when scrolling down the page). I'm using jquery to accomplish this.
When it gets fixed, I give it a ".fixed" class. Which gives it "top:0px;position:relative;". #menu has a transition to it, but #menu.fixed removes the transition. This works great in the beginning, when scrolling down and then having it become attached to the top of the window. Switching the positions is flawless as the new class has the transitions removed.
However, when I scroll back up, and it removes the ".fixed" class, it animates the (now) absolutely positioned #menu from 0px to 615px. Which means it jumps up to the top of the page, and then scrolls down, as it's not fixed anymore.
This is the code:
$('#menu').css({ top: '615px'}); // top was 0px before this. It is still fixed, so it should NOT animated.
$('#menu').removeClass('fixed'); // Now the transition kicks in
//As it's at 615px, it should stay where it is, not start animating to 615px from 0px as it does.
I think it's because the element hasn't actually been repositioned by the time the ".fixed" class is removed, and thus it animates down with it's new positioning... I could do an interval or something similar to trigger the class to be removed, but it just seems silly.
I'm also aware that I could just make it positioned:absolutely all the time. And just reposition the top-value when I scroll. But that seems redundant...
Does anyone know how to solve my problem?

Related

Scroll to div ID with offset

I am currently runnning a test site on Wordpress.
I have my page with several divs which have IDs and a menu on top with anchors which lead to those IDs.
My header is sticky, so when I click an anchor, it navigates to the div ID, but the beginning of the div stays hidden below the header. I would like it so that when I click an anchor, it navigates to the div, but few pixels above it.
I managed to do that, though with a little problem.
(function($,document){
$("a[href^='#']").click(function(){
var url = $(this).attr('href');
$('html,body').animate({scrollTop: $(url).offset().top - 90}, 2000);
});
})(jQuery);
What happens is:
I click an anchor with a href="#someid"
My browser navigates to the #someid with offset of - 90px (It works perfectly so far)
Then my browser scrolls 90px down, to the position where the div #someid starts at the beginning of the viewport (and behind the sticky header).
Finally my URL changes to http://example.com/#someid
I just want to delete step 3. Any help is much appreciated.
Update:
I just found out my theme has jQuery "One-page-nav" plugin installed and it is interfering. Still trying to understand how it works and if I can modify it to have offsets
I was having the same issue and in my case I solved it by adding padding-top and a negative margin-top of the same value:
.some-class {
padding-top: 4em;
margin-top: -4em;
}
By doing this my element looks like it's on the exact same location but the browser finds it sooner while scrolling. You can set these values to the height of your sticky header or play around to make sure the heading is exactly where you want it to be.
I hope I'm explaining this in a way that's understandable... It sure makes sense in my head :D

Navbar visibility point auto-adjusts after top-down scrolling

Have put together a sticky navbar (jsfiddle) that comes into view only after the user scrolls down 10px from the top of the document. However as seen in the fiddle; using:
$(window).scroll(function () {
if ($(this).scrollTop() > 10) {
document.getElementById('navig').style.visibility = 'visible';
this only works in the first instance after the code is run. In subsequent similar actions (after scrolling down the document completely and scrolling back up again) in the same session, the navbar comes into appearance much further down than 10px. It only works again on refresh (rereun) and that too again, only the first instance of top to bottom scrolling.
Also, I'd want the effect to act on scrolling back up ie. the fixed navbar should become absolute at the base of the header when the user moves past that point. And it should hide when scrolling past 10px from top. There isn't a scrollBottom() function, so how is this handled?
This fiddle has jquery loaded: https://jsfiddle.net/6ss64s7e/
How can these issues be addressed? (pardon, am new to javascript).
Before you return to the value position:absolute; you have to delete all the other properties that you added because they won't be automatically deleted - so, you don't need top:0; anymore.
You can delete the top:0; property by passing empty string to its value, like this:
$('#navig').css({'position':'absolute','top':''});
For the detection of scroll and its direction, see this question.

How to keep div in the center of viewport

I am creating a feedback system for one of my projects. My target device is iPad. Basically what happens is a div called into the page via ajax and it is supposed to overlay the content underneath. I have that part working.
What I want to do is have the div locked to the middle of the view-port. I have tried position:fixed on my element which works, except it will lock into the wrong position. It seems to be centering itself to the initial position of the viewport. If I scroll down to the bottom of a longer page and call my feedback window, it will still be near the top.
Ajax Page (this runs when the page is called)
$(document).ready(function(){
$(".popup").css({
top: "50%",
left: "50%",
marginLeft: -$(".popup").width() / 2,
marginTop: -$(".popup").height() / 2
});
});
If I can find the top of the viewport I think I'd be able to get this working right.
I've looked into: http://www.appelsiini.net/projects/viewport but it doesn't really solve my problem.
Any help, advice or pointers in the right direction would be greatly appreciated! Thanks!
Fixed positioning is applied relative to the top-left corner of the window, regardless of how far down you're scrolled (which I assume is what you want).
So:
.popup {
position:fixed;
top:20px;
left:40px;
right:40px;
}
Will, first of all, put your popup 20px from the address bar (meaning, even if you scrolled to the bottom).
Next, setting both left AND right will "stretch" the fixed element to start and end 40px (or whatever you give it) from both sides of the window. That's a convenient way of centering this popup div.
If your popup needs to be a fixed size – not stretched based on the width of the window – you could set both the left and right (to zero probably) and then inside this div, have another div with margin:0 auto, which will center that inner div within the fixed outer div.
P.S.
Just as you can set both left and right, you can also set both top and bottom, which will have corresponding results. However, if you need a fixed height, you won't be able to vertically center it using the margin:auto trick.
Don't know if it's the case, but If $(".popup") it's initially hidden by display:none, then it's width and height will be zero on page load.

I need help figuring out how to toggle an element once vertical height of window is scrolled

I'm trying to toggle a div from relative to fixed when I scroll down 200px using javascript. When I reach 200px from the top of the window, my div should toggle to fixed. And when I'm above that 200px from the top it should go back to relative. Does anyone have an idea on how to do this?
Something like:
$(window).on('scroll', function() {
$("#myDivID").css({
position: $(this).scrollTop()<200?'relative':'fixed',
top: $(this).scrollTop()<200?'200px':'0px'
});
});
You'll probably also have to reset the top position of the element.
I know there's at least a couple of plugins that do this. Can't remember the name of the one I saw last, but here's one I've written myself: http://code.google.com/p/sleekphp/source/browse/trunk/Sites/SleekBase/Modules/Base/JS/jQuery.fixedIfNeeded.js
You use it like so:
$('#my-element').fixedIfNeeded();
There's one optional argument that specifies if the element should stop being fixed before it reaches another element (like a footer for example):
$('#my-element').fixedIfNeeded('#footer');

Static positioned div box problem

I need to have a div box in a static position meaning that when someone scrolls down the page, the div stays in the same position.
I have googled a lot and I found some solutions, but they were all using defined positions like top left, top right etc.. and I need a solution that will work regardless of the place the div is in. So basically the script needs to either take the current position and set that to the fixed position, or not work with fixed X/Y position..
Any ideas?
Thanks,
You need to use position:fixed for your element.
Example:
#dv{
position:fixed; /* this is important for you */
width:200px;
height:200px;
background:blue;
}
Check out the example
Notice that div remains there even if you scroll :)
http://jsfiddle.net/Shaz/Fqr4t/
I'm not entirely sure what you mean by 'regardless of the place the div is in', however, if you can't use position: fixed, there is an onscroll event in Javascript that you can hook into. You can update the position of the div there. Do note that this is usually isn't fast enough to look fluent.

Categories