I am trying to recreate the header effect on this page
https://staffhub.office.com/
The page doesn't start scrolling till a certain height is scrolled.
And Im guessing the different sections of the header are just animated in everytime you scroll each section.
Im guessing this can be done in Jquery
you guessed right.
$("#idOfScrollingDiv").scroll(scroll1);
function scroll1() {
if($("#idOfScrollingDiv").scrollTop() > $("#breakpointDiv").position() {
$("#idOfScrollingDiv").scroll(scroll2);
}
else {
//desired scroll1 behaviour
//i.e. flip between slides
//and prevent dfault behaviour
}
}
function scroll2() {
if($("#idOfScrollingDiv").scrollTop() <= $("#breakpointDiv").position() {
$("#idOfScrollingDiv").scroll(scroll1);
}
else {
//normal scrolling
}
}
Related
I've made a game website that has horizontal and vertical scrolling but I want the website to stop or disable scrolling down the page at the "second arrows" but be able to scroll up the page.
basically I've already tried "overflow-y:hidden" but i still want to beable to scroll back up the page
https://codepen.io/54x1/full/qBBdXGP
check out my codepen to see my design
code for where i want it:
var BotOfWin1 = $(window).scrollTop() + $(window).outerHeight();
var BotOfObj1 = $('.main-rules').position().top + $('.main-rules').outerHeight();
if (BotOfWin1 > BotOfObj1)
{
$('.game-section').css({"display": "block"});
} else {
$('.game-section').css({"display": "none"});
}
I don't know your motivation for disabling scrolling below the second arrows (can the user navigate there other than scolling?). So I'll just go with the assumtion, that you simply want to prevent the user from ever getting there.
Just use display: none in CSS to not display the content.
What I would do is:
Do not display the second page element on pageload
.content-second {
display: none;
}
On scrolling, check if the page has been scrolled to the very right. If so: display second page element.
var win = $(window);
var contentWidth = $('.content-first').width();
win.on('scroll', function () {
var scrolledRight = win.scrollLeft() + win.width() >= contentWidth;
if (scrolledRight) {
$('.content-second').addClass('show');
}
});
See this pen for a simplified example.
Need to scroll to bottom automatically once messages are being added in a chat.
Tried AfterViewChecked method of implementing this, as suggessted in
[angular2 scroll to bottom (chat style) - It works fine as it makes the scroll move to bottom. But when we try scrolling up as soon as we add a message in the chat, it is not allowing and it again pushes the view to the bottom of the chat
Please suggest a workaround on this.
The below code worked for me for my angular 4 chat application
My component.html
<div class="feedBody" #scrollMe (scroll)="onScroll()" >
<div class="feedList">
</div>
</div>
My component.css
.feedBody {
height: 235px;
overflow-y: auto;
}
My component.ts
scrollToBottom():void{
if (this.disableScrollDown) {
return
}
try {
this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
} catch(err) { }
}
onScroll(){
let element = this.myScrollContainer.nativeElement;
let atBottom = (element.scrollTop+200) >= (element.scrollHeight - element.offsetHeight);
if (atBottom) {
this.disableScrollDown = false
} else {
this.disableScrollDown = true
}
}
I was using element.scrollTop+200 because I wanted a behaviour where I should not compulsorily present at the bottom of the screen but can be a little top by 200px.
Hope it works for you.
The header on my site disappears when a user scrolls down the page. If the user begins to scroll up the header is displayed again, even if they're halfway down the page. If the user starts to scroll downwards, the header disappears again.
The effect works pretty well. Here's a CodePen showing the markup, css and javascript:
http://codepen.io/anon/pen/QpWXpj
From what I can see the only issue it has is if you scroll and and up really quickly. It's almost like the code can't react quick enough and the detached class is added when it's not needed. Which means in the demo you get the (lovely) red background even when you're at the top of the browser.
Can anyone help/suggest how the script could be amended to prevent this?
Thanks in advance!
You have to take out the
if (!currentScroll) {
header.removeClass('detached');
}
out of the else block so that the menu jump fix is applicable at all times and not only when the else condition is satisfied.
Check updated codepen: http://codepen.io/nashcheez/pen/KWKjjq
So your js code becomes:
/* ==========================================================================
#SHOW/HIDE HEADER
========================================================================== */
$(function() {
var previousScroll = 0, // previous scroll position
menuOffset = 70, // height of menu (once scroll passed it, menu is hidden)
detachPoint = 220, // point of detach (after scroll passed it, menu is fixed)
hideShowOffset = 5, // scrolling value after which triggers hide/show menu
header = $('.page-head');
$(window).scroll(function() {
if (header.hasClass('expanded')) return;
var currentScroll = $(this).scrollTop(),
scrollDifference = Math.abs(currentScroll - previousScroll);
// if scrolled past menu
if (currentScroll > menuOffset) {
// if scrolled past detach point add class to fix menu
if (currentScroll > detachPoint) {
var value = parseInt(header.css('transform').split(',')[5]);
console.log(value);
if (!header.hasClass('transitioning') && !header.hasClass('detached') && value != -110) {
header.addClass('transitioning').one('transitionend', function() {
console.log('transitionend');
header.removeClass('transitioning');
if (currentScroll > detachPoint) header.addClass('detached');
});
} else if (!header.hasClass('transitioning') && !header.hasClass('detached')) {
header.addClass('detached');
}
}
// if scrolling faster than hideShowOffset hide/show menu
if (scrollDifference >= hideShowOffset) {
if (currentScroll > previousScroll) {
// scrolling down; hide menu
if (!header.hasClass('invisible'))
header.addClass('invisible');
} else {
// scrolling up; show menu
if (header.hasClass('invisible'))
header.removeClass('invisible');
}
}
}
// only remove “detached” class if user is at the top of document (menu jump fix)
if (!currentScroll) {
header.removeClass('detached');
}
// If user is at the bottom of document show menu.
if ($(window).height() + currentScroll == $(document).height()) {
header.removeClass('invisible');
}
// Replace previous scroll position with new one.
previousScroll = currentScroll;
});
});
/* ==========================================================================
#SHOW/HIDE NAVIGATION
========================================================================== */
/*
* Creates classes to enable responsive navigation.
*/
// Wait for the DOM to be ready (all elements printed on page regardless if
// loaded or not).
$(function() {
// Bind a click event to anything with the class "toggle-nav".
$('.page-head__toggle').click(function() {
if ($('body').hasClass('show-nav')) {
$('body').removeClass('show-nav').addClass('hide-nav');
setTimeout(function() {
$('body').removeClass('hide-nav');
}, 500);
} else {
$('body').removeClass('hide-nav').addClass('show-nav');
}
// Deactivate the default behavior of going to the next page on click.
return false;
});
});
I am trying to set my website's side menus fixed when you scroll the windows more than a specific number. The menus are working fine and they get fixed after scroll. This is OK but the problem is after scroll they should collapse and when you click on them they should extend but this doesn't happen! I mean it works sometimes and sometimes it doesn't! I am using addClass() to add the fixed class to the menus!
$(window).scroll(function() {
if ($(window).scrollTop() > (rightHeight + $('.header-wrapper').height() + $('.top-wrapper').height() + $('.back-picture').height()) + 300) {
$('.login-fixed').fadeIn(100);
$('.col-content').css('margin-right', '15%');
$('.right-side').addClass('fixed');
$('.right-side').children('.side-widget').addClass('side-widget-fixed');
$('.right-side').children('.side-widget').click(function() {
if ($('.right-side').children().hasClass('open')) {
if ($(this).hasClass('open')) {
$(this).toggleClass('open');
} else {
$('.right-side').children().removeClass('open');
$(this).toggleClass('open');
}
} else {
$(this).toggleClass('open');
}
});
} else {
$('.col-content').css('margin-right', 0);
$('.right-side').removeClass('fixed');
$('.right-side').children('.side-widget').removeClass('side-widget-fixed');
$('.login-fixed').fadeOut(100);
}
});
I am also trying to handle the click and it means when another menu is extended when you click on a menu the other one collapses and this one opens! I know that maybe my question is a little confusing but I am confused too.
Just for more info I should say when I edit the code it works but after refreshing 10 times or scrolling 20 times it corrupts!
I am trying to change css styles as a user scrolls down and set them back to how they were when the user scrolls back to the top.
$(window).on( 'scroll', function(){
if ($(window).scrollTop() > 0) {
$('#mainMenu').animate({marginTop: '15px'},300);
$('#phoneNumber').animate({opacity: '0'},300);
$('#mainNav').addClass("mainNavScroll");
} else {
$('#mainMenu').animate({marginTop: '70px'},300);
$('#phoneNumber').animate({opacity: '1'},300);
$('#mainNav').removeClass("mainNavScroll");
}
});
It does the top part of the code (the first "if" section) fine but when I scroll back up to the top, I have problems with the "else" code. It does the last line right away (removes .mainNavScroll from #mainNav) and then waits about a minute to do the rest of the code (animations for #mainMenu and #phoneNumber).
I think this is what you want:
var top = true;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() > 0) {
if (top) {
top = false;
$('#mainMenu').stop().animate({marginTop: '15px'},300);
$('#phoneNumber').stop().animate({opacity: '0'},300);
$('#mainNav').stop().addClass("mainNavScroll");
}
} else if (!top) {
top = true;
$('#mainMenu').animate({marginTop: '70px'},300);
$('#phoneNumber').animate({opacity: '1'},300);
$('#mainNav').removeClass("mainNavScroll");
}
});
The .stop()'s will stop any animation that is currently running before running the next. This will prevent queues where animations wait for each other.
The top var is to prevent the non-top animations from being triggered thousands of times while scrolling.
If you want the class added/removed after the animations are complete, you can use a callback like this:
$('#mainMenu').animate({marginTop: '70px'},300, function() {
$('#mainNav').removeClass("mainNavScroll");
});