I search scripts, which will be behaviour during scroll: http://www.dishoom.com/.
I have three sections of the site and would like to scrollowaniu to the middle of the section equalized it to the upper position. The example is above
Regards
<script>
jQuery(document).ready(function ($) {
$(window).scroll(function () {
scroll = $(window).scrollTop();
var height_check = jQuery(window).height() ;
$(document).mousewheel(function (event) {
if (event.deltaY) {
$(window).scroll(function () {
if(scroll >= $("section#home_bg").offset().top)
{
$('section#barman').removeClass('snaps-active');
$('section#galeria').removeClass('snaps-active');
$('section#home_bg').addClass('snaps-active');
if(scroll >= ($("section#home_bg").offset().top + (0.5*height_check)))
{
$('section#home_bg').removeClass('snaps-active');
}
}
if (scroll >= $("section#barman").offset().top) {
$('section#barman').addClass('snaps-active');
$('section#galeria').removeClass('snaps-active');
$('section#home_bg').removeClass('snaps-active');
if(scroll >= ($("section#barman").offset().top + (0.5*height_check)))
{
$('section#barman').removeClass('snaps-active');
}
}
if(scroll >= ($("section#galeria").offset().top)) {
$('section#home_bg').removeClass('snaps-active');
$('section#barman').removeClass('snaps-active');
$('section#galeria').addClass('snaps-active');
if (scroll >= ($("section#galeria").offset().top + (0.5 * height_check))) {
$('section#galeria').removeClass('snaps-active');
}
}
});
}
});
});
});
</script>
Related
I need scroll on div but I have this function
$(window).on("scroll", () => {
$("[touching]").each(function() {
var className = $(this).attr("touching") var offset = $(this).offset().top - $(window).scrollTop();
if (offset <= 0) {
if (className === 'orange') {
$(this).addClass('fixed-top');
$('#menu1').addClass('section-margin');
} else {
$('#menu-list').removeClass('fixed-top');
$('#menu1').removeClass('section-margin');
}
}
})
}).trigger("scroll");
I want my scroller to hide when you come to bottom of page.
I wrote this code and it works fine:
<script>
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById("scroller").style.display='hide';
}
}
</script>
But now the scroller is hidden also when you go back to top.
I want to show #scroller again when user scroll back to top.
Simply add an else case that display it:
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById("scroller").style.display='none';
}
else{
document.getElementById("scroller").style.display='block';
}
$(document).ready(function(){
$("div").scroll(function(){
if($("div").scrollTop()==0)
$("scroller").show();
else
$("scroller").hide();
});
});
In JQuery you can use this.
Try Following
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('#scroller').hide('slow');
}
else if($(window).scrollTop()==0)
{
$('#scroller').show('slow');
}
});
<script>
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById("scroller").style.display='hide';
} else {
document.getElementById("scroller").style.display='block';
}
}
</script>
So I found this jquery code to make my nav change its size when a user begins to scroll. It doesn't appear to be working, though...
$(function(){
$('.nav').data('size','big');
});
$(window).scroll(function(){
var $nav = $('.nav');
if ($('body').scrollTop() > 0) {
if ($nav.data('size') == 'big') {
$nav.data('size','small').stop().animate({
height:'60px'
}, 600);
}
} else {
if ($nav.data('size') == 'small') {
$nav.data('size','big').stop().animate({
height:'40px'
}, 600);
}
}
Here is all the code:
http://codepen.io/DerekDev/pen/Bydgpz
So if any of you have a solution, it would be greatly appreciated. Thanks :)
try this:
$(function() {
$(window).scroll(function() {
var nav = $('.nav');
if ($(window).scrollTop() >= 0) {
if(!nav.hasClass("smallNav")) {
nav.hide();
nav.removeClass('bigNav').addClass("smallNav").fadeIn( "slow");
}
} else {
if(!nav.hasClass("bigNav")) {
nav.hide();
nav.removeClass("sml-logo").addClass('bigNav').fadeIn( "slow");
}
}
});
});
and CSS rules:
.bigNav{
height:60px;
}
.smallNav{
height:40px;
}
Firstly, you want to check the window scrollTop, not the body
Secondly, you want to change the height of the UL, not the .nav element, and you seem to have the order mixed up, you probably want 40px when it's small, and 60px when it's big !
$(window).scroll(function(){
var $nav = $('.nav');
if ($(window).scrollTop() > 0) {
console.log($nav.data('size'))
if ($nav.data('size') == 'big') {
$nav.data('size','small').find('ul').stop().animate({
height:'40px'
}, 600);
}
} else {
if ($nav.data('size') == 'small') {
$nav.data('size','big').find('ul').stop().animate({
height:'60px'
}, 600);
}
}
});
PEN
I'm working on a project based on Opencart with the theme Tranda Social (I think it's deprecated). The problem I'm facing is that at Home page ONLY I can't get the scroll-effects (eg. When scrolling-down keep the navbar in fixed position, or getting to the TOP by just clicking the button with the UP-arrow). After some research I've concluded that for some reason a Javascript function isn't get called correctly.
setTimeout(function () {
/* Menu */
$('#menu ul > li > a + div').each(function (index, element) {
var menu = $('#menu').offset();
var dropdown = $(this).parent().offset();
i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#menu').outerWidth());
if (i > 0) {
$(this).css('margin-left', '-' + (i + 5) + 'px');
}
});
/* Fixed Menu */
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#bottomh').addClass('bottomfixed');
} else {
$('#bottomh').removeClass('bottomfixed');
}
});
}
});
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#bottomh').addClass('bottomfixed');
} else {
$('#bottomh').removeClass('bottomfixed');
}
});
}
});
/* Margin Menu */
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#container').addClass(' topmargin');
} else {
$('#container').removeClass(' topmargin');
}
});
}
});
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#container').addClass(' topmargin');
} else {
$('#container').removeClass(' topmargin');
}
});
}
});
}, 500);
The functions after fixed-menu and margin-menu comments are NOT working when I'm navigating in Home page. Also if you notice, there is a duplicate of each function (don't know for what reason). Have you any ideas? Any help will be greatly appreciated.
It was a problem caused by Slidesshow module (Nivo Slider) because of a JS error related to it. Uninstall-reinstall the module fixes the problem.
If user up, then hide the element. A div.
i have something:
<script>
window.onscroll = function()
{
if (document.documentElement.scrollTop > 900 || self.pageYOffset > 900) {
$('#divId').css('display','block');
} else if (document.documentElement.scrollTop < 900 || self.pageYOffset < 900) {
$('#divId').css('display','none');
}
}
</script>
But not work.
Something like this:
$(window).scroll(function () {
var $someDiv = $("#someDiv"),
top = $(this).scrollTop();
if (top > 200) {
$someDiv.show();
} else {
$someDiv.hide();
}
});
See this Fiddle.