I have this site that has a 100% width div approximately 700px from top of page. When user scrolls page down and reaches the menu, it changes to fixed and stays on top of page until user scrolls up back. I have implemented this code I found on http://jsbin.com/omanut/2 :
<script type="text/javascript">
var fixit = document.querySelector('.topmenu');
var origOffsetY = fixit.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? fixit.classList.add('topfix') :
fixit.classList.remove('topfix');
}
document.addEventListener('scroll', onScroll);
</script>
"topmenu" is a unique class I used for the menu bar div element. "topfix" is a class defined inside some html < style > tag:
<style>
.topfix {
position: fixed;
top: 0;
}
</style>
As you can see, this code shall add "topfix" as class for the div in question. So my html should change from < div class="topmenu" > to < div class="topmenu topfix" >. IT WORKS BEAUTIFULLY GREAT on Chrome and Firefox BUT I cannot make it work on IE. I'm a noob with programming but I think there could be something missing for adding an event listener that would work on IE. I will appreciate the help.
--After some answers, I made some modifications to the script; it is cool on Chrome/FF but still does not work on IE, so here you have it:
<script type="text/javascript">
var fixit = document.getElementsByTagName('div')[3];
var origOffsetY = fixit.offsetTop;
function onTopScroll(e) {
window.scrollY >= origOffsetY ? fixit.classList.add('topfix') :
fixit.classList.remove('topfix');
}
document.addEventListener('scroll', onTopScroll);
document.attachEvent('onscroll', onTopScroll);
</script>
I'm not sure about attachEvent syntax. Any further help will be appreciated.
What is the version of your IE?. document.querySelector() is not supported in every IE. You can use getElementsByTagName and match for the particular class and then do your thing.
try attachEvent for IE not addEventListener
Related
I'm trying to get scrolling to work based on id anchors.
Which works great.
The problem is that I have 50px worth of fixed top navigation, which means that scrolling is 50px to short (so to speak)
This is my code
<script type="text/javascript">
var url = document.location.toString();
var target = url.split('#')[1];
location.hash = target;
</script>
I've tried using .offset().top-50; but keep getting
offset(...) is undefined
Any help would greatly appreciated
I am working on a mobile hybrid application.
In my html page, I have 3 tabs. When clicking a tab, the content of the scrollable div gets changed. My problem is when I scroll down the content of div (view) and click another tab, the content disappears (but the content is there). Please help me so I can reset the div scroll position when clicking any tab.
Please give me suggestions only with JavaScript or CSS, not with JQuery as I am not using the JQuery library.
Without seeing code, i can just guess.
If you want to reset the scroll position you can simply use
window.scrollTo(0,0);
add this code to your each tab click functions so that when ever you click any tab, it resets to top.
If you have any specific div that has overflow property
var myDiv = document.getElementById('specificDiv');
myDiv.scrollTop = 0;
It is easy
<div id="test" style="height:150px; width:600px;overflow-y:auto;background-color:gray;">
<div style="width:150px;height:500px; background-color:green;"></div>
</div>
document.getElementById('test').scrollTop =0;
Finally this worked for me
function resetScrollPos(selector) {
var divs = document.querySelectorAll(selector);
for (var p = 0; p < divs.length; p++) {
if (Boolean(divs[p].style.transform)) { //for IE(10) and firefox
divs[p].style.transform = 'translate3d(0px, 0px, 0px)';
} else { //for chrome and safari
divs[p].style['-webkit-transform'] = 'translate3d(0px, 0px, 0px)';
}
}
}
resetScrollPos('.mblScrollableViewContainer');
Calling this function after transition between view ,will reset my scroll position.
i used this on my inverted comments section and it worked.
instead of id i had class.
i needed for scrollbar to be at the bottom each time user adds comment.
so i put this on submit button.
const myDiv = document.getElementsByClassName('comments-container');
myDiv[0].scrollTop = 0;
I need to adjust the container div height so that it keeps the footer at the bottom of the window onload and onresize when the content is too short but not if content pushes the footer off. I've tried variations of the css min-height:100% but it doesn't work. I've managed to make it work onload with this:
<div class="header></div>
<script>
var h = window.innerHeight-205;
document.write('<div id="container" class="container" style="min-height: ' + h + 'px;">');
</script>
....content of container....
</div>
<div class="footer"></div>
but when the window is resized my footer ends up in the middle of the page or off the page. I've tried calling a resize function but never seem to get it to reset the height. The codes I tried were:
function resetHeight () {
var h = window.innerHeight-205;
document.getElementById("container").setAttribute("height",h);
}
and
function resetHeight () {
var h = window.innerHeight-205;
document.getElementById("container").height = h;
}
I'm trying to use only javascript and css, not jquery. I'm not too familiar with JS so if I'm missing something to make the function call work please let me know! I'm not concerned about older browsers, just IE9+ and such, it also needs to work on iPads when the user rotates their screen...
Any help will be appreciated!
Try using a css aproach, like the one outlined here: http://www.cssstickyfooter.com/
What is the right way to build simple floating divs using Javascript (or CSS programmatically)
that is on top and always visible when scrolling down?
Now I've seen examples like this. When you scroll down you see the div jumping and a delay. I want it to constantly be on top when the content of the page is not my ,
the script will be injected via chrome extention
can it be done?
something like this ; but less complex and not depend on the page content
With the class or id of the element you want to keep on top you should apply some CSS rules,
for example, if your element class is .topnavigation
you could do the following in jQuery
<style>
.topnavigation {
width:;/* add the width here */
position:static;
}
.topnavigation.scrolling {
position:fixed;
top:0px;
}
</style>
<script>
$(window).scroll(function () {
if($(this).scrollTop() > 50) // change 50 to what you want (work out how far the nav is from the top of the page alraedy and add it there, that'll make it smoother transition)
{
$('.topnavigation').addClass('scrolling');
} else {
$('.topnavigation').removeClass('scrolling');
}
});
</script>
If you can't use jQuery you could do the following with normal javascript:
Updated: 06 Jan 2017
I've updated this to use the document.querySelector and Element.classList methods. All modern browsers and IE 10 > support these methods.
window.addEventListener('scroll',checkPosition,false);
function checkPosition()
{
// #theid or #theclass or standard element selector
var xNAV = document.querySelector("#topnav");
if(window.scrollY > 50)
{
xNAV.classList.add("scrolling");
} else {
xNAV.classList.remove("scrolling");
}
}
With JavaScript, determine when you want it to be floating, then add css: position:fixed
I have fixed div on bottom of my page that works well. I wonder if there is some simple way to make it "stop" on some place in page when user srolls down to it. I want it to remain fixed on bottom, until user scrolls down to some defined place on page and than stick it to the page and scroll like the rest of content. Any suggestions?
I tried setting something up on jsfiddle. While I was writing it up, I see that others have posted their alternatives. In case mine helps in any way: http://jsfiddle.net/PnUmM/1/
I set the position to relative in the CSS, calculate where it is on document load to keep the info aside and then set it to fixed.
var sticky_offset;
$(document).ready(function() {
var original_position_offset = $('#sticky_for_a_while').offset();
sticky_offset = original_position_offset.top;
$('#sticky_for_a_while').css('position', 'fixed');
});
$(window).scroll(function () {
var sticky_height = $('#sticky_for_a_while').outerHeight();
var where_scroll = $(window).scrollTop();
var window_height = $(window).height();
if((where_scroll + window_height) > sticky_offset) {
$('#sticky_for_a_while').css('position', 'relative');
}
if((where_scroll + window_height) < (sticky_offset + sticky_height)) {
$('#sticky_for_a_while').css('position', 'fixed');
}
});
I made this up for you: http://jsfiddle.net/XCYFG/1/.
$(document).ready(function() {
window._div1 = $('#div1'); //selector is expensive
window._window = $(window);
$(window).scroll(function(e) {
_div1.css("top",
Math.min(_window.height(),
window.scrollY + 100)
+ _window.height() - _div1.height() - 110);
}).scroll();
});
I have a plugin that does the opposite - it's in the flow of the webpage, and when the user scrolls past it, it gets fixed to the viewport. What it actually does though is apply a css class to the element, so you should be able to use it as is.
You can find the plugin here:
https://github.com/hanssonlarsson/jquery-fixedscroll
Then I would suggest you have your element in the flow of your webpage:
<div id="sometimesFixed">content</div>
With css:
#sometimesFixed {
position: fixed;
bottom: 0;
}
#sometimesFixed.scroll {
position: static;
}
And apply the plugin like so, in your JavaScript:
$('#sometimesFixed').fixedscroll({className: 'scroll'});
There is also a more general plugin, very new, called jquery-waypoints. The idea is to bind any code to "waypoints", points on the webpage where, when the user scrolls past them, some code is executed.
https://github.com/imakewebthings/jquery-waypoints
It's probably more optimized and a better fit than my plugin, but YMMV!