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");
}
}
Related
I want my navbar to be transparant on the top and bottom of my page but i want it to not be transparant in the middle. When i have my webpage on full screen this works:
$(window).on("scroll", function () {
if ($(window).scrollTop() > 720 && $(window).scrollTop() < 1450 ) {
$(".nav").addClass("active");
} else {
$(".nav").removeClass("active");
}
})
But when it gets resized this wont work anymore because the sizes change. Is there a way to do this with % instead of just normal numbers so it will be responsive?
It occur because you hardcoded your height values. Check the whole site height, divide it on three and incorporate this variables to your if statement. Every time you resize browser window it will recalculate your new position.
window.addEventListener('resize', function() {
//one third and two third of website
oneThird = window.scrollHeight / 3;
twoThird = onethird * 2;
if ( $(window).scrollTop() > oneThird && $(window).scrollTop() < twoThird ) {
$(".nav").addClass("active");
} else {
$(".nav").removeClass("active");
}
}
You can use Media Queries with JS too, so you can do certain things on your desired window size, this might help https://www.w3schools.com/howto/howto_js_media_queries.asp
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;
}
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.
In order to prevent mousewheel scrolling to scroll the entire page when reaching the top/bottom of an element with its own scrollbars, I'm using Brandon Aaron's Mousewheel plugin.
This works fine, as long as I don't scroll too quickly. It seems that when scrolling really quickly, two events will pass the "I haven't reached the top/bottom" check yet and will both be executed. However, one of them will then scroll the element to the top/bottom and the next one will then scroll the entire page, which was what I was trying to prevent.
I'm currently doing this
$('.popupContents').bind('mousewheel', function (e, d) {
var t = $(this);
if (d > 0 && t.scrollTop() === 0) {
e.preventDefault();
} else if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) {
e.preventDefault();
}
});
(As posted in Prevent scrolling of parent element? )
How do I make it so that the function properly stops all events at the top/bottom even when the user scrolls quickly?
I ended up manually tracking the desired scroll position and disallowing the normal scroll event altogether.
var wantedScrollTop = 0;
$('.popupBody').bind('mousewheel', function (e, d) {
var t = $(this);
var scrollTo;
if (d > 0) {
scrollTo = Math.max(0, wantedScrollTop - 30);
} else if (d < 0) {
scrollTo = Math.min(t.get(0).scrollHeight - t.innerHeight(), wantedScrollTop + 30);
}
if (typeof scrollTo !== "undefined") {
wantedScrollTop = scrollTo;
t.scrollTop(wantedScrollTop);
//t.stop().animate({ scrollTop: wantedScrollTop + 'px' }, 150);
}
e.preventDefault();
});
d is the scroll direction, so I'm manually keeping track of the wanted scroll position here. In my case there is only one popup at a time, so I didn't bother sticking the wantedScrollTop in a data- attribute or something similar on the element, which could be useful when youdo have multiple elements that need to track their own scroll position.
It is not doing a fluent scroll like your browser would, but it will change the vertical scroll position by 30 pixels for each time the scrollwheel triggers the event. I left the commented out line in the code to show how that could be achieved. However, for me this resulted in scrolling which feeled very lagged when scrolling quickly.
i have a huge html form , with near 350 controls that take 5-6 times of the user screen height.
user starts completing each input field from the beginning of the page and goes on.
once the cursor rich near the bottom of screen user must be able to see some next input fields so here is the problem :
i want to avoid the scrollbar usage.
i want to set some "margines" ( say 200px for each page side )
if user clicks a control that is near the screen edge, here this mechanism must work also
i'm looking for a jQuery solution
playing around with jQuery.ScrollTo, but can't figure out how to embed my logic into code.
This should do it
http://jsfiddle.net/JsWnk/
$(document).ready(function() {
$('input').focus(function() {
var padding = 100; // Desired page "padding"
var lbound = $(this).offset().top - $(window).height() + padding;
var ubound = $(this).offset().top - padding;
if ($(window).scrollTop() < lbound)
$(window).scrollTop(lbound);
else if ($(window).scrollTop() > ubound)
$(window).scrollTop(ubound);
});
});
Something like this should work...
http://jsfiddle.net/q9QHQ/
$(document).ready(function() {
$('input').focus(function() {
if ($(this).offset().top > 100)
$(window).scrollTop($(this).offset().top + 100);
});
});