DIV nav appear after scrolling past header - javascript

I am designing a site with a sticky nav appearing after scrolling past the header.
I got this to work using this script:
$(window).load(function(){
// Get the headers position from the top of the page, plus its own height
var startY = $('#header').position().top + $('#header').outerHeight();
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('#navbar').slideDown();
}else{
$('#navbar').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
});//]]>
The problem is the scrip reads the height of my header on load, but because my header height is 100% of the viewport, when one resizes the window, the nav appears either too late or too early.
For example loading the page with a 670px high viewport, sized down to a 400px viewport. My header shrinks along to 400px high, even though te nav only appears after 670px
any way to fix this?
thanks

Put your javascript function trigger in a document.ready() instead of a window.load() ?
Try moving this part OUT of the window.load().
$(window).scroll(function(){
checkY();
});

Try this:
$(window).on("load resize",function(e){
// Get the headers position from the top of the page, plus its own height
var startY = $('#header').position().top + $('#header').outerHeight();
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('#navbar').slideDown();
}else{
$('#navbar').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
});//]]>
It's only the first line (on load resize) that is modified.

Related

Is there a way to set the vertical scroll position of a page when at a specific break point?

I want the page to scroll down to an anchor id (or scroll down 1000px for example) if the browser/device width is resized to a certain break point (480px). Is this possible?
You will need to write your scroll code inside $(window).width() condition if window is resized like
$(window).on("resize", function() {
if ($(window).width() <= 480) {
//write your scrolling code here
}
})

How to check if the element is near the bottom of the screen?

How is the way to check if some the element is near the bottom of the screen let say 100px from the bottom? (not the bottom of page).
The thing is i wanted that when this element is clicked, an another element will shown up and will slide to top rather to down if is near the bottom of the screen?
You can identify when an element is under 100px from the bottom of the screen with the following condition (without the need to use jQuery):
if (window.innerHeight - element.getBoundingClientRect().bottom < 100){
// the desired place
}
I think what you want is a button that displays when the user is almost at the bottom of your screen and when the user clicks on it, it scrolls them back to the top of the screen.
You may want to use JavaScript to achieve this.
Using the jQuery library
<script type="text/javascript>
$(document).scroll(function(){
var x = $(this).scrollTop();
if (x > 250) //The 250 is the total height of div that the user scrolls to before the button displys for the user to click
{
$('.button').fadeIn();
} else {
$('.button').fadeOut();
}
$('.button').click(function() {
$('html, body').animate({
scrollTop: $('.topmost_div').offset().top}, 'slow'); //tell the page to scroll back to the div at the top of the page.
});
});
</script>
Hope this helps

Fix div when scrolled at its bottom

I have a collapsible aside nav (so don't know the height of it) and a div under it, which should change position to fixed when scrolled at it's bottom.
I achieved this, but when I scroll back at top, the div stays fixed and I can't find solution to make it static again at the point where it was at the beginning, since I don't know where the exact point is.
Here is a fiddle (I explain my solution in js comments): https://jsfiddle.net/1krLnv7q/2/.
Could anybode help me, please? I am stuck.
EDIT
You can define your vars outside of the scroll() event, otherwise it will cause a buggy animation.
Like this
$(function(){
//top offset of static/fixed div
var staticOffset = $('.static').offset().top;
//window height
var wpHeight = $(window).height();
//point when the user scrolls at the bottom of div
//static/fixed div height + top offset - viewport height
var treshold = staticOffset + $('.static').height() - wpHeight;
$(window).scroll(function(){
//if user scrolls below the divs bottom (treshold) it becomes fixed
if ($(window).scrollTop() > treshold){
$('.static').addClass('fix');
}else{
$('.static').removeClass('fix');
}
});
});

When I hit refresh in the browser I lose my jquery programming

If you take a look at http://www.kahuna-webstudio.fr/ and scroll down the page about 50 pixels or so you will see a div on the left side of the screen slide out. I have managed to duplicate this effect but there is one thing that escapes me; and that is when you hit refresh on my page my jquery programming resets. I don't want this to happen. http://www.kahuna-webstudio.fr/ has it working perfectly. On their page when scroll down 50 pixels and the left nav appears and even when you hit refresh the left nav is still there. The left nav only disappears when the user scrolls back to the top of the page.
What is currently working: The user scrolls down 296 pixels on my page and the left nav slides out and the user brings the scroll bar back to the top of the page (pixels less than 25) and the left nav slides back and disappears. This is all working.
What is not working: But let's say the user scrolls down 296 pixels and the left nav slides out and then the user hits refresh while they are viewing the page. Well in this case the left nav disappears. My jquery programming is reset. I want the left nav, when the user is at 296 pixels or greater, to always be visible even if the user hits refresh.
My code is below. I hope my question makes sense and I welcome any help. Thank you.
$(window).scroll(function () {
var wintop = $(window).scrollTop();
var docheight = $(document).height();
var winheight = $(window).height();
var newwidthgrow = 80;
var smallheight = 0;
var smallwidth = 0;
//var expanded = "false";
if ((wintop > 296)) {
//expanded = "true";
$("#slidebottom").stop().animate({
height: docheight + "px"
}, 'fast', function () {
$("#slidebottom").stop().animate({
width: newwidthgrow + "px"
}, 'slow', function () {
$("#slidebottomContents").fadeIn();
});
});
}
if ((wintop < 25)) {
//expanded = "false";
$("#slidebottom").stop().animate({
height: docheight + "px"
}, 'fast', function () {
$("#slidebottomContents").fadeOut(function () {
$("#slidebottom").stop().animate({
width: smallwidth + "px"
});
});
});
}
});
If you don't have code in place to remember the scroll position before a refresh, the page will always refresh and scroll position will be 0 again. It sounds like that's not your desired functionality. Triggering a scroll at startup will not fix your problem unless you set the correct window scroll position before triggering it.
The example page you gave looks like it uses multiple scroll libraries, one of which (not sure which one) probably handles setting the scroll position on a refresh.
To do it yourself, you'd have to make use of local storage or the url like explained here:
Refresh Page and Keep Scroll Position
Have this window scroll function in a separate place. Call it from window scroll and also from document ready. This will make sure that the user's position is checked both when the page is being scrolled and when the page is loaded/refreshed.
You can use cookie to solve this probelm if you don't want to use server side to fix position when page is reloaded.

How do I get scrollable div to not add height to containing divs when screen resolution height is too small to fit the scrolling div?

I'm using javascript to move a div down the page as you scroll. I found the code online and it works for what I needed. The problem I'm running into is for lower screen resolutions (ipad) where you have to scroll down to see the footer past the main content area, the scrolling div pushes down to get onto the screen, changing the height of the divs and body, which makes you be able to endlessly scroll down the page. The div scrolls by adding a margin to the top of the div being moved as you scroll. I've tried setting heights on all the containing divs and body but nothing seems to be working css-wise, and I don't know enough about javascript to set some sort of condition.
The page I'm working on is http://gwa-inc.com/pages.aspx?pid=31&name=Americana
If you make your browser window height smaller and scroll down the page, you'll see what I'm talking about. Is there an easy fix to this that I'm missing?
Script being used is:
var $sidebar = $(".subMenuWrap"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 30;
$window.scroll(function () {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
You should absolutely position the box that needs to scroll, so that it will be pulled out of the flow of the page. Then you can more closely control where that box goes and can keep it from pushing the footer down further.

Categories