I am looking to create a simple parallax split screen site that allows me to once a new screen is loaded alternate the scrolling. For example, If I scroll down and the content on the left and right appear I want to then lock the right side and have scrolling only happen on the left until that content is finished.
So it should start like this:
http://alvarotrigo.com/blog/multiscroll-js-jquery-plugin-to-create-multi-scrolling-sites-with-two-vertical-layouts/
but once the section loads in I need just the left scrollable like this:
http://www.themealings.com.au/leesa/portfolio/nick-jr-parents-blog/
Once the left side content is complete I want to present a new section. Any ideas on how this can happen? What is the best JS library to achieve this?
There are several plug-ins that can accomplish this quite easily.
Give this a shot -----> http://viget.com/inspire/jquery-stick-em
Demo here: -----> http://davist11.github.io/jQuery-Stickem/
I am currently using this hard code to accomplish something similar, so this might be of use as well:
var $window = $(window),
$mainMenuBar = $('#fixed-div'), //This div will scroll until top
$menuBarOffset = $mainMenuBar.offset().top,
window_top = 0,
footer_offset = $("#end-div").offset().top, //this div tells #fixed-div when to start scrolling
content = $("#unaffected-div"), //This div scrolls like normal
panel_height = $mainMenuBar.outerHeight()+'px';
$window.scroll(function() {
window_top = $window.scrollTop();
if (window_top >= $menuBarOffset) {
if (window_top >= footer_offset) {
$mainMenuBar.removeClass('stick');
content.css('margin-top', 0);
} else {
$mainMenuBar.addClass('stick');
content.css('margin-top', panel_height);
}
}
else {
$mainMenuBar.removeClass('stick');
content.css('margin-top', 0);
}
});
You will also need to add this element to your .css file
.stick {
position: fixed;
top: 0;
}
Related
it isn't a duplicate as I've read the others question but everyone assume that the scroll is vertical, while i need this for horizontal scroll.
What i'm trying to do is to scroll a div, placed somewhere in a page, when it reach the center of the screen or it is almost visible, then when it end its scroll i need to continue the page scrolll.
Actually i have a "slider" like this: JSFIDDLE
Actually, I can get an advise when the element is visible on the page after scrolling, but I don't know how to disable vertical scroll, scroll my div, and then scroll page again. The important thing is that the div scroll how much i continue the scrolling (intended with mouse, keyboard and maybe touch, it will be awesome)
function testInView($el){
var wTop = $(window).scrollTop();
var wBot = wTop + $(window).height();
var eTop = $el.offset().top;
var eBot = eTop + $el.height()+50;
return ((eBot <= wBot) && (eTop >= wTop));
}
function setInView(){
$(".slider-wrapper").each(function(){
var $zis = $(this);
$zis.removeClass("inview");
if(testInView($zis)){
alert("eccolo");
}
});
}
$(document).scroll(function(){
setInView();
});
$(document).resize(function(){
setInView();
});
$(document).ready(function(){
setInView();
});
If you want to disable vertical scrolling then just set overflow-y: hidden on body element
body {
overflow-y: hidden;
}
i was working on woocommerce site.My Site . The single product page has a control generator with a number of drop down options.So when a user selects each options he cannot see the changes happening at the top.So i position the image div as fixed.As follows.
.single-product .images{position:fixed;}
this made the image fixed but it is floating till down the page.I only need it just before the description/review tabs starts.Is there any other css or any js/jquery solutions to solve this .Please help.Thanks!!
Based on your website environment, you need something like this:
var images = jQuery('.images');
jQuery.fn.followTo = function (pos) {
var $this = this,
$window = jQuery(window);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos - $this.height()
});
} else {
$this.css({
position: 'fixed',
top: 'auto' //earlier it was 0
});
}
});
};
images.followTo(jQuery('#myTab').offset().top - images.height());
You may need to re-position the elements a bit, but the script will work on your website, as I tested with firebug.
I have note written this script, the script attributed to: Stopping fixed position scrolling at a certain point?
Let me know if you can take it forward from here :)
Right now I have it that if a user scrolls past the bottom of the side bar, then the sidebar turns to fixed and stays on the users page while they read the rest of the main content.
But now my fixed div is falling out into the footer. So, how can I stop it from falling out of the parent div and into the footer?
Here's a fiddle of what's going on: http://jsfiddle.net/95W8w/
All the code is in jsFiddle, but since SO requires I put code here if I have a jsFiddle include.
JavaScript:
$(document).ready(function() {
// Cache selectors for faster performance.
var $window = $(window),
$sidebar = $('#anchor'),
$sidebarAnchor = $('#right');
// Run this on scroll events.
$window.scroll(function() {
var window_top = $window.scrollTop();
var div_top = $sidebarAnchor.offset().top;
if (window_top > div_top) {
// Make the div sticky.
$sidebar.addClass('stick');
$sidebarAnchor.height($sidebar.height());
}
else {
// Unstick the div.
$sidebar.removeClass('stick');
$sidebarAnchor.height(0);
}
});
});
Change bottom to top in your .stick class definition to make the sidebar stick to the top instead of bottom.
.stick {position: fixed; top:0px;}
Essentially what I want to do is keep my blog posts' meta information on the screen at all times. As it is, the meta info (title, author, etc.) is displayed to the left of the post content, and I have it set up where the meta information stays on screen smoothly when I scroll down. However, I'm having an issue:
I can't get it to smoothly not scroll over the #comments DIV. It either overlaps or is jumpy, depending on how I tweak the code.
Here is the JS function I'm using:
function brazenlyScroll() {
var element = jQuery(".single-post .headline_area");
var top = element.offset().top - 50;
var elementHeight = 26 + element.height();
var maxTop = jQuery("#comments").offset().top - elementHeight;
var scrollHandler = function() {
if (jQuery(document).width() > 1035) {
var scrollTop = jQuery(window).scrollTop();
if (scrollTop<top) {
element.css({position:"relative",top:""})
} else if (scrollTop>maxTop) {
element.css({position:"absolute",top:(maxTop+"px")})
} else {
element.css({position:"fixed",top:"50px"})
}
}
}
jQuery(window).scroll(scrollHandler);
jQuery(window).resize(scrollHandler);
scrollHandler();
}
That code is included via an external JS file and is called at the bottom of the page. You can see all of this in action here: http://www.rickbeckman.org/dumber-and-dumber-and-dumber/
Any help would be greatly appreciated.
You can make the comments div shrink to right by giving it a 300px padding when meta block reaches maxTop.
I just tested ur code and was able to fix the overlapping by changing 26 to a bigger number, say about 60.
var elementHeight = 26 + element.height();
Hope this helps.
I'm looking for a solution to keep an element in view, while scrolling the rest of the page.
I don't want to re-invent the wheel so i'm reaching out to see if the community knows of a canned solution already.
I want to apply this to a huge table that I have, and I would like users to be able to continue seeing the table headers as they scroll down.
Just to clarify, what I'm looking for is different from a scrollable table with overflow CSS settings. The reason I can't use a scrollable table is because that method becomes very slow with thousands of rows. Also that method does not work well on the iPhone browser.
Ideally I would like it so that when the user scrolls the page down the table's header would 'stick' at the top edge of the browser's view. Inversely if the user scrolls back up it would continue to stick there until it arrives back at the original position the header started from.
Are you looking for the #element { position: fixed; ... }? You can switch between fixed, relative and absolute using JS.
http://www.w3schools.com/cssref/pr_class_position.asp
Edit
Take a look at how they do it on [I hope they don't mind] http://www.zocdoc.com/search.aspx?dr_specialty=98&address=Enter+a+City+and+State%2C+or+Zip&insurance_carrier=-1&insurance_plan=-1&button.x=166&button.y=21
They use jQuery, it doesn't seem complicated and they also has an IE6 workaround
$(function() {
var msie6 = $.browser.msie && $.browser.version < 7;
if (!msie6) {
var top = $('#scroll_header').offset().top
- parseFloat($('#scroll_header').css('margin-top').replace(
/auto/, 0));
$(window).scroll(function(event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#scroll_header').addClass('fixed');
} else {
$('#scroll_header').removeClass('fixed');
}
});
var y = $(this).scrollTop();
if (y >= top) {
$('#scroll_header').addClass('fixed');
} else {
$('#scroll_header').removeClass('fixed');
}
} else {
setInterval("checkScroll()", 100);
}
});
function checkScroll() {
ie6top = $('#scroll_header_wrapper').offset().top;
if ($(document).scrollTop() > ie6top) {
$('#scroll_header').css("top", $(document).scrollTop() - ie6top + "px");
$('#scroll_header').css("visibility", "visible");
} else {
$('#scroll_header').css("visibility", "hidden");
}
}