I have some menu items on the right hand side of my website that are: -
Basket Summary
Best Sellers
Quick Links
etc
I want the basket summary to follow down the page as the page is scrolled, I know how to this using position: fixed, but I need it to also move the other elements out of the way otherwise it will just overlap them.
I was looking at this: jsfiddle which would do the job and works but obviously thats only on button click, I would need to adapt this to scroll via jQuery.
I have read many tutorials for floated fixed divs but they are all for one div and don't have any other divs to interact with.
Any ideas if possible and/or how to do it?
Code from js fiddle as follows: -
$(function() {
$('.upButton').click(function(e){
var $parent = $('.highlight').closest('.box');
$parent.insertBefore($parent.prev());
});
$('.downButton').click(function(e){
var $parent = $('.highlight').closest('.box');
$parent.insertAfter($parent.next());
});
});
Is this what you're looking for?: http://jsfiddle.net/cmontgomery/YVh4q/
essentially, whenever the window scrolls check to see if your section is in the visible area and if not, adjust accordingly:
$(window).scroll(function () {
var mover = $("#sidebar .quick-links");
if($(window).scrollTop() === 0) {
//console.log("to top");
mover.prependTo("#sidebar");
} else if(!isFullyInViewableArea(mover)) {
var parent = mover.closest('.section');
if(isBelowViewableArea(mover)) {
//console.log("moving up");
parent.insertBefore(parent.prev());
} else {
//console.log("moving down");
parent.insertAfter(parent.next());
}
}
});
I must admit, this solution is not the best user experience, i.e. it jumps instead of scrolling smoothly. If it were me I would put the movable section as the last item in the right column and move that down the page with absolute positioning so it follows the top of the view-able area exactly.
Use this
Drag & Drop is best.
Greetings.
Related
I've seen a few different threads seemingly about this but none of the answers in them have a working solution for me.
Here's what I want:
Big transparent header with a big logo on the top.
Small colored header with a small logo when user has scrolled past the topmost area.
I'm using navbar-fixed-top and and Bootstrap's scrollspy to add and remove certain classes from the header.
Here's why it hasn't worked so far:
$(window).scrollTop() doesn't return anything meaningful at all.
It seems wrong to change at a certain amount of pixels from the top anyway, since it can vary between screen resolutions.
Initiating a change based on what activate.bs.scrollspy captures works rather well except it shows the wrong header when I load the page for the first time.
It seems impossible to place a <div id="whatever"> at a certain spot and have the header change when scrollspy finds it. I've tried making the div 1px in dimension and placed at the absolute top of the page, but the scrollspy still identifies it from way off.
Here's my jQuery code at the moment, which is very imprecise AND shows the wrong header at the first load of the page (remember, you're not always at the top of the page when loading (reloading) the page!).
$(document).ready(function() {
$('body').scrollspy({ target: '.navbar-inverse' });
$('#main-header').on('activate.bs.scrollspy', function () {
var currentItem = $('.nav li.active > a').text();
var header = $('.navbar');
var logosmall = $('.small-brand');
var logobig = $('.big-brand');
if (currentItem == 'top' && header.hasClass('navbar-small')) {
header.removeClass('navbar-small');
header.addClass('navbar-big');
logosmall.css('display', 'none');
logobig.css('display', 'inline-block');
}
else if (currentItem != 'top' && header.hasClass('navbar-big')) {
header.removeClass('navbar-big');
header.addClass('navbar-small');
logobig.css('display', 'none');
logosmall.css('display', 'inline-block');
}
});
});
Wrap your code into window scroll event as mentioned below then only $(window).scrollTop() will work as you expecting.
$(window).scroll(function () {});
Here is a great example of your problem, it is a bit tricky to shrink your navbar but not impossible. You have to take into account a lot of things. I found this a while ago: http://www.bootply.com/109943
It is really strange that $(window).scrollTop() does not return anything by the way. What browser are you on? And your problem with reloading the browser:
$(window).load(function{
//logic to check how far scrolled
})
I am having an issue. Im using a one page design for a friend with a fixed floating menu on the top. The problem I encounter is that when I click on a link it scrolls down but the offset is not right. Most the of time it scrolls down a little too much covering the content below the menu. What I am trying to achieve is that the scrolling stops at the div being exactly below my menu bar. The other issue is that somehow it wont scroll down when the space between two sections is too narrow. It tries but somehow only moves a few pixels then stops. I can imagine that both are related to the offset issue.
Im sorry, english is not my native language.
Here is what I got so far. A standard scrolling function with window.location.hash. The target are divs spread across the site.
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var t = $(this.hash).offset().top;
$('.wrapper').animate({
scrollTop: t,
}, 1000, function () {
window.location.hash = target;
});
});
});
You can see an example of the problem live: http://rolfvohs.com/
What I tried so far was using the add.class function to bind the div with an extra padding when a link is clicked. It does work in a way but creates an awkward space. I also tried placing the divs at different locations but that does not fix the job either, just messes it up further.
I would appreciate some insight.
window.location.hash = target;
moves the scroll by default to the div position and you are setting offset top before the hash change so first its changes the offset after that it move to div location.
first try after removing the line "window.location.hash = target;" from the code
or
move the "window.location.hash = target;" out side and above the "$('.wrapper').animate({})" it will work .
I'm been trying to get my head around issue and seem to cant find some help.
http://fiddle.jshell.net/DQgkE/7/show/
The experience is a bit jumpy and buggy now- but what i will like is
1) When you scroll down the page. I want the Sticky Nav to be (disable,dropped off, stop) at a specific location(chapter-3) on the page and the user should have the ability to keep scrolling down.
2) When the user is scrolling back up, the code will stick the nav back and carry it up until the nav reaches the original position at the top.
Below is a starting point.
3) Currently is kinda of doing that but there's some huge jump going on when scrolling back up
http://imakewebthings.com/jquery-waypoints/#doc-disable
using disable, destroy, enable option will be nice.
This is a original experience cleaned: http://fiddle.jshell.net/DQgkE/1/show/
Thanks for the help in Advance.
I'm not sure how this plugin you used work, but I have a solution I wrote a while back that I wrote in jquery. It has few variables at the top, the item you wanted sticky, the item where you want it to stop, and the class to add when it becomes sticky and padding at the top and bottom. I only modified the javascript portion in this fork.
EDIT
I went ahead and fixed the original code. Solution without waypoint plugin is in comments.
Here is the result:
http://fiddle.jshell.net/Taks7/show/
I would recommend to use jQuery (that was a surprise, right?! :P)
$(document).ready(function() { //when document is ready
var topDist = $("nav").position(); //save the position of your navbar !Don't create that variable inside the scroll function!
$(document).scroll(function () { //every time users scrolls the page
var scroll = $(this).scrollTop(); //get the distance of the current scroll from the top of the window
if (scroll > topDist.top - *distance_nav_from_top*) { //user goes to the trigger position
$('nav').css({position:"fixed", width: "100%", top:"*distance_nav_from_top*"}); //set the effect
} else { //window is on top position, reaches trigger position from bottom-to-top scrolling
$('nav').css({position:"static", width:"initial", top:"initial"}); //set them with the values you used before scrolling
}
});
});
I really hope I helped!
I want to achieve the effect that is used on this Header on this example website:
http://anchorage-theme.pixelunion.net/
You will notice that as you scroll the page, the header slowly moves upward until it disappears from view. I want to achieve this same effect. I believe it will need some JS and CSS positioning but still have no clue how to achieve this. Is this done with parallax scrolling?
Would appreciate if someone could give me a quick example of the code used to do this with a element. So I can then use it on my own site.
Cheers.
the $(window).scroll(function () {...}) is the one you need here
$(document).scrollTop() is the amount of scrolled distance from the top
Use this:
$(window).scroll(function(){
if ($(this).scrollTop() > x){ // x should be from where you want this to happen from top//
//make CSS changes here
}
else{
//back to default styles
}
});
I have a facebook "like us" icon on one site, now client requirement is to keep it visible when user scrolls the up until it reaches the top position of page (which is sorted by using jquery stickynotes) and the icon should still be visible when somebody re-size the browser (X = (browser width/2) + (wrapper/2)).
Not able to make out how can I do that, since first condition forces the div to be static positioned so that it can move-along when the page is scrolled down.
But in order to re-position it I'll require to make the potion fixed.
Kindly suggest a way out.
Just a simple example how you can fix that:
function movement() {
var topPosition = $(window).scrollTop();
if(topPosition > 100) {
// do something
$('element').addClass('dosomething');
} else {
// do something
$('element').removeClass('dosomething');
}
}
$(document).ready(function() {
$(window).scroll(function() {
movement();
});
});
Have you looked at something like jQuery Waypoints?
I'm not sure it's an exact match, but it solves some of these problems elegantly.