I have the following css:
html, body {background:#ebeced;min-height:100%;font-family:Helvetica}
body {overflow-y:scroll; cursor:default;}
And I add the .fixed class dynamically to the body when I open a modal window so that scrolling can't take place.
.fixed #container-wrapper {position:fixed;left:0;width:100%;}
I also have a fixed nav bar and then the content. The content is inside container-wrapper:
<body>
<nav></nav>
<div id="container-wrapper">
<!-- all website content -->
</div>
</body>
Problem
If I have scrolled down through the content at all and then open the modal, the content jumps right back to the top. I thought this may be an issue with event.preventDefault but I know now that it isn't to do with this. It's connected to the adding of the .fixed class that causes the issue.
JSFIDDLE
https://jsfiddle.net/w9w9hthy/1/ - scroll down to the button and click the button. This will add a .fixed class and the content will "reset" to the top. How can I stop this "reset" effect?
Instead of making container-wrapper fixed you can stop scrolling from happening by making the body overflow: hidden and removing it when you want scrolling to continue.
Fiddle: https://jsfiddle.net/w9w9hthy/2/
.fixed {
overflow: hidden;
}
Demo: https://jsfiddle.net/w9w9hthy/5/
From my jQuery popup project: https://github.com/seahorsepip/jPopup
//Freeze page content scrolling
function freeze() {
if($("html").css("position") != "fixed") {
var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
if(window.innerWidth > $("html").width()) {
$("html").css("overflow-y", "scroll");
}
$("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
}
}
//Unfreeze page content scrolling
function unfreeze() {
if($("html").css("position") == "fixed") {
$("html").css("position", "static");
$("html, body").scrollTop(-parseInt($("html").css("top")));
$("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
}
}
This code takes, width, height, scrollbar and pagejump issues into consideration.
Possible issues resolved with above code:
width, when setting position fixed the html element width can be smaller then 100%
height, same as above
scrollbar, when setting position fixed the page content no longer has a scrollbar even when it had a scrollbar before resulting in a horizontal pagejump
pagejump, when setting position fixed the page scrollTop is no longer effective resulting in a vertical pagejump
If anyone has any improvements to above page freeze/unfreeze code let me know so I can add those improvements to my project.
Edit:
Just tested above code on some random pages and found some issues on some sites due to the use of body or html as main scroll content, I resolved those issues in above code and will push them to the github project.
Related
I have a site design where a second logo needs to appear after a set scroll position. I have managed this with the following code:
myID = document.getElementById("logoTwo");
var myScrollFunc = function () {
var y = window.scrollY;
if (y >= 300) {
logoTwo.className = "logo-lines show"
} else {
logoTwo.className = "logo-lines hide"
}
};
window.addEventListener("scroll", myScrollFunc);
Can I adapt this script so that when a user scrolls to a set point of the screen, the logo then stops being fixed position, and will scroll with screen with the rest of the content?
Thank you
look into using css position:sticky for the logo that needs to move out of the way after a set point, the logo element's position would be sticky, and the bottom of its parent container is where it would stop being fixed on screen. Position the bottom of the sticky element's parent at the point where you'd like the fixed position to stop, and the sticky element will scroll with the page.
For reference: https://alligator.io/css/position-sticky/
When modal is shown I add a class with overflow: hodden to body tag. So content behind the modal is not scrolling. Everything is good.
BUT
If the original page is big enough to have a scrollbar, then I can see ugly shift of the page to the right, when I open the modal. I find out the reason of such behavior. Overflow: hidden causes scrollbar to dissapear, so that's why it is ~10px shift to the right.
My question is how to fix this. In fact, I need to apply overflow:hidden but still have scrollbar shown.
(function() {
let _scrollPosition;
function preventScroll(e) {
e.preventDefault();
window.scroll(..._scrollPosition);
}
function lock() {
_scrollPosition = [window.pageXOffset, window.pageYOffset];
$(window).on('scroll touchmove', preventScroll);
}
function unlock() {
$(window).off('scroll touchmove', preventScroll);
}
return {
lock,
unlock
};
})();
You can just lock the scrolling position as soon as you open the modal with this code.
I used the property navbar-fixed-top to fixed my navbar to the top. But I have an other fixed element we don't see.
This is my fixed navbar and under it, the fixed element I want to see.
What is happening is that my element (just call it "line") is fixed by the options but the position of the navbar is not absolute, so the line pass under the navbar and when I scroll down, the line is well fixed but it's hidden by the navbar. I don't know if it's clear but I want this two element to be glued and not superimposed.
How should I do ?
EDIT :
My jsfiddle : http://jsfiddle.net/5Zv8h/13/
If you try to remove th enavbar, you'll see that the first line stays on the top of the page. With the navbar, it's hidden.
I have written script to fix this, add this to Your code:
js
var navheight = $(".navbar-fixed-top").innerHeight();
var offtop = $(".ht_clone_top").offset().top;
$(window).scroll(function(){
var scrolltop = $(window).scrollTop();
if(scrolltop + navheight >= offtop){
if(!($(".ht_clone_top").hasClass("affixed"))){
$(".ht_clone_top").addClass("affixed");
}
if(offtop>= scrolltop){
console.log("now");
$(".ht_clone_top").css({
"top": scrolltop - 40
});
} else {
$(".ht_clone_top").css({
"top": 50
});
}
} else {
$(".ht_clone_top").removeClass("affixed");
$(".ht_clone_top").css({
"top": 0
});
}
});
css
.affixed {
z-index: 99999;
position: absolute;
}
demo:
http://jsfiddle.net/5r9p380n/2/
I have a very similar question to this user, but wasn't able to solve my problem.
I also referred to Chris Coyier's tutorial and used his :before pseudo-element approach. However I cannot get the top of the <section> element to reflect the same top as it's :before child.
Here is some sample code:
HTML
<section id="about">
CSS
#about:before {
display: block;
content: " ";
margin-top: -180px;
height: 180px;
visibility: hidden;
}
Here is the website I am working on so you can check it out live.
The reason I am wanting to do this is because my nav bar is fixed and whenever clicking on hash tag links from the nave bar it nearly cuts off the section title. I would just like to offset the stopping point of the scroll to add just a bit more padding between the title and nav bar.
Thanks in advance!!
It would seem that the padding-top on your section element is what is causing the problem. If you remove the padding it will work, however, all your spacing would need to be fixed.
I think the easiest thing for you to do would be to offset your scroll function... In agency.js add - 70 after scrollTop: $($anchor.attr('href')).offset().top on line 12:
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -70
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Is there a way to scroll the content of an element that has an overflow of hidden to the top?
Example use case:
Container element has a max height of 200px, starting position is at 60px.
User clicks "show more", the height expands to 200px.
Since there is more content than 200px allows, the user can scroll to the bottom of the list.
When the user clicks "show less", the height lowers to 60px.
Problem arises, in that the list is no longer at the top and not scrollable.
Any ideas here would be great.
I believe it is not possible with CSS.
You can try to look at element.scrollIntoView.
Searching for scrollIntoView I found this question on SO where the answer suggests using jQuery's scrollTop.
Do you mean something like that?
http://jsfiddle.net/8pvjf/
It has to do with jquery indeed
$(document).ready(function(){
$('.background').css('font-size',($(window).width()*0.1));
$(".blow").each(function(){
});
$('.blow').on('click', function(event){
var element = $(this);
if(element.attr('data-blow') == 'true'){
element.animate({ width:'24%', height:'20%' , opacity:0.6 }, 1000).attr('data-blow', 'false')
$(this).addClass('blow')
$(this).removeClass('overflow')
} else {
element.animate({ width:'100%', height:'100%' , opacity:0.95 }, 1000, function(){
$('body').animate({ scrollTop: element.offset().top });
}).attr('data-blow', 'true').addClass('overflow').removeClass('blow');
}
});
$(window).resize(function(){
$('.background').css('font-size',($(window).width()*0.1));
});
Have fun toying with those codes as much as you want.
Of course, this is based on some previous work of mine and you'll need to change your classes and styles accordingly to your needs. :)