I placed logo in sticky navigation bar. It should be visible only if scroll some 100px.
I tried using reference Show div after scrolling 100px from the top of the page but its not working for me.
Can any one please help.
Here is the code
<div id="toplogo"><img src="images/logo.png" /></div>
<script>
var navlogo = $("toplogo");
$(window).scroll(function(){
if($(window).scrollTop() >= 100 ){
navlogo.show();
} else {
navlogo.hide();
}
});
</script>
Your jquery selection is wrong.
var navlogo = $("toplogo");
should be
var navlogo = $("#toplogo");
Related
css
.stick{position: fixed !important;}
sticker div with id="summary-div"
<div class="col-sm-8"><!-- this Div has 4 accordions div--></div>
<div class="col-sm-4">
<div>
<div>
<div>
<div id="order_summary">
<div id="summary-div"></div>
</div>
</div>
</div>
</div>
</div>
footer
<div class="container-fluid" id="stickEndPlace"></div>
The below jquery code is making it stick and unstick but the stickermax which is calculated dynamically to determine the css property top to stick it or unstick right above footer. BUT, the problem is; I have to give some static values for some of the scenarios for the "stickermax" variable to be pretty fit above footer otherwise, it is coming sometimes little below or little above the footer having id of "stickEndPlace". Please, help. Thanks
var s = $("#summary-div");
var pos = s.position();
var stickermax = $(window).outerHeight() - $("#stickEndPlace").outerHeight() - s.outerHeight();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top && windowpos < stickermax) {
$("#summary-div").addClass("stick"); //stick it
$("#summary-div").css("top",""); //kill top css property which sets while unsticking
} else if (windowpos >= stickermax) {
$("#summary-div").removeClass("stick"); //un-stick
$("#summary-div").css({top: stickermax + "px"}); //set sticker right above the footer
} else {
$("#summary-div").removeClass("stick"); //top of page
}
});
problem
The actual problem coming is from this line of code.
var stickermax = $(window).outerHeight() - $("#stickEndPlace").outerHeight() - s.outerHeight();
This "stickermax" value is not coming correctly so the Scroll Div sometimes go below inside footer and sometimes stops above footer.
How to fix that "stickermax" because it is the dynamic "top" css property which is making the sticker DIV positioning.
I’ve made my navigation for mobile sticky with this code:
<div class="stickyTest" id="stickyTest2">
<ul id="nav">
<li class="homeicon"></li>
<?php echo $_menu ?>
</ul>
<script type="text/javascript">
document.observe('dom:loaded', function() {
new MobileNavigation();
var searchToggle = $('mobile-search-toggle'),
searchForm = $('search_mini_form');
if (searchToggle && searchForm) {
searchToggle.observe('click', function() {
searchForm.toggleClassName('shown');
});
}
});
</script>
<script type="text/javascript">
function ajaxsearchsubmit(form){
var search = encodeURIComponent(form.w.value);
document.activeElement.blur();
window.location="http://www.test.co.uk/search/go?w="+search;
return false;
}
</script>
<div class="clear"></div>
</div>
And the css:
.stickyTest {
background: #362011;
position:fixed;
z-index:1000;
width:100%;
top:0px;
}
#stickyTest2 {margin-top:40px;}
Now my problem is that I only need the position:fixed of the .stickyTest class and the margin-top:40px of the #stickyTest2 id to be applied for when the user scrolls down and the top navigation goes out of view. So two questions:
How do I apply those specific styles on scroll?
Is there a way to detect when the top navigation goes out of view? I know I could do something that the sticky nav styles are applied when the user scrolls beyond 200px for example but with different screen sizes etc. I’d like to know if there is a more flexible method?
How do I apply those specific styles on scroll?
If you can use jQuery library, you can detect the scroll event with this code :
$(window).scroll(function(){
// your code
});
Then you can use addClass() and removeClass() to play with class.
Is there a way to detect when the top navigation goes out of view?
You can get the height of the navigation bar with this piece of code, with jQuery again and do a test in your scroll() function with the scrollTop() method, like this for instead :
var stickyHeight = $('.stickyTest').height();
$(window).scroll(function(){
// if your top navbar is out of view
if($(window).scrollTop() > stickyHeight){
$('.stickyTest').addClass('fixed');
}else{
$('.stickyTest').removeClass('fixed');
}
});
See a live example
Source :
scroll() : https://api.jquery.com/scroll/
addClass() : https://api.jquery.com/addclass/
removeClass() : https://api.jquery.com/removeclass/
scrollTop() : https://api.jquery.com/scrollTop/
Sticky Sidebar that only sticks when sidebar bottom is at window bottom
i get this site ( got to bootstrap sticky example)
javascript
$(function() {
var win = $(window);
var doc = $(document);
var wh = win.height();
var dh = doc.height();
var sidebar = $('.rightside .stickybar');
var sot = sidebar.offset().top;
var sh = sidebar.height();
var elementToBottom = dh - sot - sh;
// reset the sidebar width
var wt = sidebar.width();
sidebar.width(wt);
win.scroll(function(){
var dst = doc.scrollTop();
var scrollBottom = dh - dst - wh;
if(scrollBottom <= elementToBottom) {
sidebar.addClass('fixToBottom');
} else {
sidebar.removeClass('fixToBottom');
}
});
});
css
.fixToTop {
position: fixed;
top: 50px;
}
.fixToBottom {
bottom: 60px;
position: fixed;
}
html
<header> </header>
<div class="contents">
<div class = "leftside"> left</div>
< div class="righside">
<div class="stickybar">
// when move scrolling up and down
</div>
</div>
</div>
<footer> footer </div>
I have a 2 column layout. The left column is way longer than the sidebar. I want the sidebar only to stick when its bottom reaches the bottom of the browser window. So the user can continue to scroll down the left column content while the right sidebar sticks. I've seen a lot of sticky questions here, however this particular situation still stumps me. I also have a sticking headline bar on the left column that i've successfully gotten to stick.
Check out this example, I whipped up.
http://www.bootply.com/hVx29SmQ4g
If you or anyone has any questions, just send me a message and I'll try to explain. I commented the code however, so it should be quite straightforward. I hope its what you needed though!
:::CODE:::
/*
=== JS ===
============
Author: Kevin Leegsma
Updated: Feb 10, 2015
Notes: Coded for Stack Overflow - re: Sticky Sidebar
*/
/* Base function that waits till rest of site loads and then executes */
$(document).ready(function () {
"use strict";
/* activate sidebar, this can also be done as in-line HTML using the following line, instead of the Javascript below */
/* <div class = "col-xs-4" id = "rightColumn" data-spy = "affix" data-offset-bottom = "200"> */
$('#sidebar').affix({
offset: {
top: 400 /* both TOP and BOTTOM can be used here, tweek to your own needs */
}
});
/*This function gets the WIDTH of the wrapper and maintains it for the SIDEBAR*/
/*It does this by setting the WRAPPER as the PARENT, it then calls a function to resize the child (SIDEBAR)
in this case equal to the parent size.*/
/*NOTE: Without this function, the AFFIX still works, just doesn't function as nicely as it doesn't follow
standard Bootstrap grid CSS rules. */
$('#sidebar').each(function () {
var elem = $(this);
var parentWrapper = $('#sidebarWrapper');
var childToParentResize = function () {
var sidebarWidth = $(parentWrapper).width();
elem.width(sidebarWidth);
};
childToParentResize();
$(window).resize(childToParentResize);
});
/* Alert to inform you the SIDEBAR has become fixed, can be removed/commented, just for testing, but helpful for those new to AFFIX */
$('#sidebar').on('affixed.bs.affix', function(){
alert("The left navigation menu has been affixed. Now it doesn't scroll with the page.");
});
});
/* CSS used here will be applied after bootstrap.css
=== CSS ===
=============
Author: Kevin Leegsma
Updated: Feb 10, 2015
Notes: Coded for Stack Overflow - re: Sticky Sidebar
--------------------------------------
Layout
-------------------------------------- */
/* Targets the SIDEBAR once the affix has become active */
/* Adjust these to cater to your layout settings */
#sidebar.affix{
top: 10px;
right: 8.5%;
}
/*
==============
=== HTML ===
==============
Author: Kevin Leegsma
Updated: February 10, 2015
Notes: Coded for Stack Overflow - re: how-use-sticky-sidebar-move-up-when-window-scroll-top
*/
<!-- Main Code -->
<div class="container" id="main">
<!-- Left column with dummy text -->
<div class="col-xs-8" id="leftColumn">
<h1> LEFT COLUMN</h1>
<h3>With Even More Filler Text!</h3>
<p>...a bunch of text...</p>
</div><!--end leftColumn-->
<!-- Right column/sidebar that affixes itself as the window is scrolled -->
<!-- Stuck within a col-xs-4 parent element, this is because the AFFIX
has wonky width controls, they ignore Bootstrap grids and aren't responsive
with this wrapper and the JS however, it resizes well. -->
<div class="col-xs-4" id="sidebarWrapper">
<div id="sidebar" data-spy="affix">
<h1> SIDEBAR</h1>
<h3>With Filler!</h3>
<small>
<p>...sidebar text/links...</p>
</small>
</div><!--end sidebar-->
</div><!--end sidebarWrapper-->
</div><!--end container-->
I'm not at my computer at home right now, if it still isn't answered by tonight I'll whip up an example.
However if I'm reading what you need correctly, all you need to do is give the one element, that's to be fixed, the AFFIX property either through HTML/CSS
<div id="sidebar" data-spy="affix" data-affix-bottom="50">
NOTE -> the data-affix-bottom is an offset number, so tweak it to suit your needs
Or through JavaScript
$("#sidebar").affix({
offset: {
bottom: someValue
}
}
});
Some useful links that explain it more in depth:
http://getbootstrap.com/javascript/#affix
And
http://goo.gl/8knwd4 (With a scrolling sidebar example)
So I was given a web template that uses a jquery library called sticky, and it "sticks" the navigation (starts at the bottom and moves up) at the top of the page, as you scroll.
I want to be able to plop a logo onto the navigation once it hits its resting place (post scroll). Similar to this website - http://99u.com/. Once you scroll past the image header, the logo fade's in to the nav bar and then stays on the page. Anyhow, here is the excerpt of the jquery code:
<script>
$(window).load(function() {
$('nav').sticky({ topSpacing:0, className: 'sticky', wrapperClassName: 'my-wrapper' });
});
</script>
And here is the excerpt of the html:
<div with image slideshow></div>
<nav>
<div class="container">
<div class="thirteen columns">
<ul id="nav" class="links">
<li id="sticker"><img src="[image i want to display after scroll]" /></li>
<li>About</li>
<li>Contests</li>
<li>etc.</li>
</ul>
</div>
</div>
</nav>
<div's and the rest of the page's content></div>
This whole template is responsive. Any help would be appreciated, or if someone can point me in the right direction. Thanks!
Take a look at scrollTop and offset.
This is untested but it would look something like this:
$(window).scroll(function(){
if($("#nav").offset().top <= $(window).scrollTop)
$("#nav").css({"position":"fixed","top":"0px", "left":"0px"});
else
$("#nav").css({"position":"relative"});
});
Basically, as the user scrolls, check the windows scroll position and if it passes the top of the nav, switch the nav over to fixed positioning. In my code above, the check on the way back may need a little tweaking but when they scroll to a position less than the height of the nav, put the nav back to relative positioning.
Also instead of switching to position fixed you could show/hide a totally separate nav, might actually make life easier.
-Ken
You can test the position property of the menu and when it changes, hide/show the image via adding/removing a class:
CSS:
#sticker.hidden { width:0; height:0; border:0; padding:0; margin:0; }
#sticker.hidden * { display:none; }
Javascript:
$(window).load(function () {
$('nav').sticky({
topSpacing: 0,
className: 'sticky',
wrapperClassName: 'my-wrapper'
});
var elem = $('#sticker');
var nav = $('nav');
var pos = nav.css('position');
$(window).scroll(function(){
if (nav.css('position')!=pos) { // if changed
if (pos=='fixed') {
elem.addClass('hidden');
} else {
elem.removeClass('hidden');
}
pos = nav.css('position');
}
});
});
jsfiddle
Thanks for the suggestions. They both helped! Here is what i ended up doing:
<script>
$(window).load(function() {
$('#sticker').css({'display':'none'});
$('nav').sticky({ topSpacing:0, className: 'sticky', wrapperClassName: 'my-wrapper' });
$(this).scroll(function() {
if($('nav').offset().top <= $(window).scrollTop()) {
$('#sticker').fadeIn('fast');
} else {
$('#sticker').css({'display':'none'});
}
});
});
</script>
I am loading data on page and using infinite scroll to load more data as the user scrolls (default 20 items on page load. But depending on the screen resolution like 1080 the page loads and the vertical scroll bar is not visible or active for the user to scroll. I added a button for the user to click to load more and as they scroll that load button will hide.
Problem: on page load if a vertical scroll is active or visible how can i hide the button from the start rather then having to scroll the first time for it to hide. Also how can i keep the load button visible until a vertical bar is active.
div/button:
<div id="loadUsers" class="btn" data-bind="click: Next" style="position:fixed; width:auto; height:20px; padding:5px; bottom:10px; ">
Load more users...
</div>
knockout Next method
Next = function () {
var _page = $.views.Roster.ViewModel.CurrentPage() + 1;
$.views.Roster.ViewModel.CurrentPage(_page);
$.views.Roster.GetPage(_page);
};
hide load button once scrolling is enabled
$(document).ready(function () {
$('#main').scroll(function () {
$('#loadUsers').hide()
var div = $(this);
if (div[0].scrollHeight - div.scrollTop() == div.height()) {
Next();
}
});
});
visible binding:-
<div id="loadUsers" class="btn" data-bind="click: Next, visible: displayBtn()" style="display:none; ">
Load more users...
</div>
Script:-
self.displayBtn= function(){
return ($(document).height() < window.innerHeight);
}
With this function you can know if the vertical scrollbar is active :
var isVBActive = function(){
return ($(document).height() > window.innerHeight);
}
And with the resize event can hide or show the button :
$(window).resize(function() {
if(isVBActive())
$('#button').hide();
else
$('#button').show();
});
I hope it helps.