I am trying to make the bootstrap header of this umbraco uSkinned template http://synergy-bs.uskinned.net/ behave like the header of this template http://source-v4.uskinned.net/
The first thing is that I will need to do is stop the animation of the header poping down after a certain scroll position has been reached, I cannot find how this is firing and do I modify the css or the javascript?
Thanks.
Edit this:
$(window).on("scroll", function() {
var fromTop = $(window).scrollTop();
$("body").toggleClass("down", (fromTop > 300));
});
In the file applications.js to:
$(window).on("scroll", function() {
var fromTop = $(window).scrollTop();
$("header").toggleClass("up", (fromTop > 100));
});
Then add to your css:
header.up {
top: -100px;
}
Related
I have a jquery code which makes an existing element follow the scroll of the user. I want it to stop when reaching a certain element #header-line, but it's not consistent. On some PDPs it scrolls and stops there, on others, it scrolls past the line.
Page: https://www.norli.no/to-pappaer
(Code is not activated here)
jQuery
require(['jquery'], function($){
$(document).ready(function() {
(function($) {
var element = $('.product-add-form'),
originalY = element.offset().top;
var hr = $('#header-line > hr');
topOfLine = hr.offset().top;
var topMargin = 250;
element.css('position', 'relative');
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
var nextPosition = scrollTop - originalY + topMargin;
var maxPositionAllowed = topOfLine - 1000;
element.stop(false, false).animate({
top: scrollTop + 250 < originalY ? 0 : Math.min(nextPosition, maxPositionAllowed )
}, 0);
});
})(jQuery);
});
});
You could definitely take advantage of using position: sticky if you are able to make sure all parent elements of the sticky element have overflow: visible
In that link you posted, if you wanted .product-add-form to be position: sticky you would have to make sure .off-canvas-wrapper has the overflow: hidden changed to overflow: visible.
I made an example fiddle of that page you shared so you could see how easy it would be to make that side form sticky.
https://jsfiddle.net/treckstar/d30phae8/8/
I want my div to animate when that div is almost half while scrolling.
How can I do it? It's not on a fixed div but its like sticky sidebar
Just like on this website sample
this is my code
$(function(){ // document ready
if ($('.filter-container').length) { // make sure ".filter-container" element exists
var el = $('.filter-container');
var stickyTop = $('.filter-container').offset().top; // returns number
var stickyHeight = $('.filter-container').height();
$(window).scroll(function(){ // scroll event
var limit = $('#footer').offset().top - stickyHeight - 100;
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){
el.css({ position: 'fixed', top: 0, width: 280 });
}
else {
el.css({ position: 'static', width: 280 });
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({top: diff});
}
});
}
});
You could write a jQuery function using Waypoints.
Or more easily (in my opinion) but with higher payload cost use Bootstrap affix. In this case you keep your current css but then add some Bootstrap properties to the div, in your case:
<div class="filter-container" data-spy="affix" data-offset-top="60" data-offset-bottom="200">
This will add the classes .affix-top to the div UNTIL the user scrolls past 60px. Then if will change to .affix when the user gets 200px from the bottom it will change to .affix-bottom to the class.
This jsfiddle shows it quite well:
http://jsfiddle.net/skelly/df8tb/
This shows the appropriate css to get the sticky effect.
I have problems adding a class to the navigation after scrolling to get a fixed class. My website has a video in the background and only the <div> with the .wrap class can scroll all the content. When scrolling I would like the navigation to be fixed on top.
This is my Javascript code:
$(document).ready(function() {
var navpos = $('.navbar').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('.navbar').fadeIn(500).addClass('fixed-top');
}else {
$('.navbar').removeClass('fixed-top');
}
});
});
But the problem is that the body is in fixed position and only the content wrap is actually scrolling. How do I fix this?
Bind the scroll to the wrapper
$(document).ready(function() {
var navpos = $('.navbar').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($('.wrapper').scrollTop() > navpos.top) {
$('.navbar').fadeIn(500).addClass('fixed-top');
}else {
$('.navbar').removeClass('fixed-top');
}
});
});
my page contains a header which stays on top of a dark image. The image is the exact same size as the viewport from the browser.
My goal is, when I scroll down the page and the header passes the image completely, that the background-color of the header changes.
Is that possible - and how?
Thanks
You can done it by using jquery's "scrollTop":
$(window).scroll(function() {
if ($(window).scrollTop() > sumValue) {
$('#header').css('background', 'yellow');
}
})
"sumValue" refer the amount of scroll you want the user to travel until you change the background.
Please look at the Fiddle
$(function() {
var image = $('.image'),
winHgt = $(window).innerHeight();
image.css({ height: winHgt });
$(window).scroll(function() {
var header = $('#header'),
winHgt = $(window).innerHeight();
if ($(window).scrollTop() > winHgt) {
$('#header').css({ background: '#333' });
}
else if ($(window).scrollTop() < winHgt) {
$('#header').css({ background: '#888' });
}
});
});
I want a circle div to lock in the header when the user scrolls past in.
I'm using the following code but it doesn't work
var circle$ = $('.circle'),
oCircleBottom = circle$.offset().top + circle$.outerHeight(true),
window$ = $(window);
window$.scroll(function() {
if (window$.scrollTop() > oCircleBottom) {
}
}.bind(this));
I want to perform an action when the user scrolls pass the circle div; however, the code above does not seem to work. Is oCircleBottom computed correctly?
Enclose your code in $(document).ready function
$(document).ready(function () {
var circle$ = $('.circle'),
oCircleBottom = circle$.offset().top + circle$.outerHeight(true),
window$ = $(window);
window$.scroll(function () {
if (window$.scrollTop() > oCircleBottom) {
$('.circle').css({
position: 'fixed',
top: '0',
left: '0'
});
}
else{
$('.circle').css({
position: 'static'});
}
}.bind(this));
});
You need to take window height into account because if the height of the page isnt enough to scroll down, your code doesnt work. Take a look at this example
However, if the increase page height, you code will work fine without subtracting window height. Take a look at this example
Hence, its better to subtract the window height. jsFiddle
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.circle').offset().top + $('.circle').innerHeight() - window.innerHeight) {
//Do you stuff
}
});