I made a scroll to top and scroll to bottom button. My intention is to hide both of the buttons in pages that do not contain vertical scrollbar only. However, only scroll to top button disappear in pages that do not have vertical scrollbar. If the user clicks the scroll to top button, it will direct the user to the top of the page which in result, the scroll to top icon changes to scroll to bottom icon which allow user to go bottom of the page. So the issue arise around here, when it changes to scroll to bottom icon, the button will stay in every page including pages that do not have vertical scrollbar. For scroll-to-top button , it does not happen like that as it will disappear in pages that do not have vertical scrollbar but not for scroll to bottom button. This issue happens when scroll to bottom button shows up. Could you please help me ? Any idea on fixing this?
ScrollToTop.vue
<template>
<div v-scroll="onScroll" >
<v-btn v-if = "!isVisible"
fab fixed bottom right color="primary" #click="toBottom">
<v-icon>mdi-arrow-down-bold-box-outline</v-icon>
</v-btn>
<v-btn v-else
fab fixed bottom right color="primary" #click="toTop">
<v-icon>mdi-arrow-up-bold-box-outline</v-icon>
</v-btn>
</div>
</template>
<script>
export default{
,
data () {
return {
isVisible: false,
position: 0,
}
},
methods: {
onScroll () {
this.isVisible = window.scrollY > 50
},
toTop () {
this.position = window.scrollY
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
})
},
toBottom(){
let pos = this.position > 0 ? this.position : document.body.scrollHeight
window.scrollTo({
top: pos,
behavior: 'smooth'
})
},
}
}
</script>
Default.vue
<script>
export default {
name: "DefaultLayout",
data() {
return {
hasScroll: false
};
},
methods: {
hasVerticalScroll() {
this.hasScroll = document.body.offsetHeight > window.innerHeight;
}
}
}
</script>
<template>
<v-app dark v-scroll="hasVerticalScroll">
<ScrollToTop v-if="hasScroll"></ScrollToTop>
</v-app>
</template>
Related
I'm developing an application where the user logs in to their dashboard. When they log in there is a side bar to the left and main content to the right. There is a burger icon to toggle the side bar which works fine but I also want the width of the main content to change depending on whether the side bar is open or closed. I want the side bar to make up 20% of the page and the main content to make up 80%. When the side bar is closed I want the main content to change to 100% width.
When I toggle the side bar menu the first time the menu closes and the main content changes to 100% width, but when I reopen it doesn't change back to 80%. I'm a bit stuck can't figure why - looks fine to me.
<template>
<div class="main-content" v-bind:style="{ 'width': width + '%' }">
<div id="burger" :class="{ 'active' : isBurgerActive }" #click.prevent="toggle(); changeWidth();">
<slot>
<button type="button" class="burger-button">
<span class="burger-bar burger-bar-1"></span>
<span class="burger-bar burger-bar-2"></span>
<span class="burger-bar burger-bar-3"></span>
</button>
</slot>
</div>
</div>
</template>
<script>
import {store} from '../store.js';
import {mutations} from '../store.js';
export default {
data() {
return {
width: 80
}
},
computed: {
isBurgerActive() {
return store.isNavOpen
}
},
methods: {
toggle() {
mutations.toggleNav()
},
changeWidth() {
if (this.width = 80) {
this.width = 100;
} else if (this.width = 100) {
this.width = 80;
}
console.log(store.isNavOpen);
console.log(this.width);
}
}
}
</script>
It's:
if (this.width == 80)
and not
if (this.width = 80)
The same for this.width == 100
I have the following JavaScript code:
var $window = $(window),
$document = $(document),
button = $('.button-ctus');
button.css({
opacity: 1,
});
$window.on('scroll', function() {
if (($window.scrollTop() + $window.height()) == $document.height()) {
button.stop(true).animate({
opacity: 0
}, 250);
} else {
button.stop(true).animate({
opacity: 1
}, 250);
}
});
In this code the right corner button disappears when you scroll down to the bottom of the page.
However I would like to have this button hiding in the middle of the page where there is a part related to this button.
In other words, to have this button disappear when the related part of the page is visible in the screen and appear when the related part is not visible on the page.
I want to move a bootstrap "navbar" header off the page when the navbar's position on the page reaches 400px.
If you look at this jsfiddle, I want the .navbar to leave the top of the page when the blue block begins (at 400px). The navbar would stay on the page through the red div, then leave the top of the page when the blue block begins.
I have tried to do this with scrollorama (jquery plugin), but have not had success yet:
$(document).ready(function() {
var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
scrollorama.animate('#fly-in',{ delay: 400, duration: 300, property:'top', start:-1400, end:0 });
});
I am looking for either a pure javascript solution, or with the scrollorama plugin. Thanks for any ideas!
I'm not very familiar with the scrollorama plugin but you can get this done simply with jQuery via the scroll() event:
$(window).scroll(function () {
var winTop = $(this).scrollTop();
var redHeight = $('#red').height();
if (winTop >= redHeight) {
/*if the scroll reaches the bottom of the red <div> make set '#move' element
position to absolute so it will move up with the red <div> */
$('#move').css({
'position': 'absolute',
'bottom': '0px',
'top': 'auto'
});
} else {
//else revert '#move' position back to fixed
$('#move').css({
'position': 'fixed',
'bottom': 'auto',
'top': '0px'
});
}
});
See this updated jsfiddle: jsfiddle.net/52VtD/1945/
Edit: make it so that the navbar disappears at the same point that the red div ends
I noticed that earlier as well but I'm having trouble locating the problem so I removed your imported style sheet and created a basic style for the navbar. To get the navbar disappears at the same point that the red div ends you need to subtract the navbar's height to the condition:
if (winTop >= redHeight - $('#move').height()) {
I've also restructured the markup to get this working properly. I've nested the navbar inside the red div and set the red div's position to relative.
See this jsfiddle: jsfiddle.net/52VtD/1981/
listen to the scroll event using jquery to find if the navbar overlaps with the red or blue div
Assign a class to the red div
<div class="redDiv" style="height:400px; background-color: red;">
Then listen to the scroll event and use the getBoundingClientRect() to find the co-ord of the navbar and the div in the view port to check for overlap
$(document).scroll(function(event)
{
var rect1 = $('.navbar').get(0).getBoundingClientRect();
var rect2 = $('.redDiv').get(0).getBoundingClientRect();
var overlap = !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)
if(!overlap)
{
if ( $(".navbar").is(":visible") ) {
$('.navbar').hide();
}
}
else
{
if ( !$(".navbar").is(":visible") ) {
$('.navbar').show();
}
}
});
Here is a working fiddle
http://jsfiddle.net/SXzf7/
I'm trying to have a submenu stay at the top of the page while scrolling once it reaches the top during scrolling. Here is what I have so far:
$(window).scroll(function () {
if ($(window).scrollTop() > 175) {
$('#location_menu').css('position', 'fixed').css('top','0px').css('z-index','1000');
$('.first').css('padding-top','415');}
else {
$('#location_menu').css('position', 'relative').css('z-index','1');
}});
The issue I'm having is that the scroll is not smooth and once the element changes from position:relative to position:fixed the content seems to jump/skip up about 415px which is the same height as the submenu.
Here is the css:
<div id="location_menu" >submenu content
</div>
<div id="content" class="location_detail first">content beneath submenu
</div>
I've added the line for .first to have a padding-top of 415px when the page is crolling and reaches within 175px of the top of the page .css('padding-top','415') this doesn't actually seem to be doing anything though. There is no change, so I assume I have executed it incorrectly.
Should I use a different scrolling function then I have listed above?
Here is what I ended up using to fix my problem, based off the code from #Danko :
$(window).scroll(function () {
var $conten = $('.first'),
$menu = $('#location_menu')
scrollpos = $(window).scrollTop();
if (scrollpos >= 175) {
$conten.css('padding-top','365px');
$menu.css('position', 'fixed').css('top','0px').css('z-index','1000');
} else {
$conten.css('padding-top','0');
$menu.css('position', 'fixed').css('position', 'relative').css('z-index','1');
}
});
Edit
Ok now that i understand the question, i did this demo http://codepen.io/anon/pen/BdkLf.
The function in fact is this:
$(window).scroll(function () {
var $menu = $('#location_menu'),
$conten = $('#content'),
scrollpos = $(window).scrollTop();
if (scrollpos >= 175) {
$menu.css( {
"top" : "0",
"position": "fixed",
});
$conten.css('top','375px' );
} else {
$menu.css( {
"position": "relative",
"top" : "175px",
});
$conten.css('top','175px');
}
});
Here 175 is equals to the initial distance from the top and 375 is the addition between the distance and the height of your menu
What I want to do is have a fixed navigation bar that is 10px from the top of the window unless it is within the first 200px of the document, then I want it to be 200px from the top ...
So basically I want a navigation bar that is 200px from the top to start off with, but when the user scrolls down 190px the navigation bar scrolls, staying always 10px from the top of the window.
You first listen to the scroll event of the window, and then use the scroll value to know what state to apply to you element. Example with jQuery :
var fixed = false, limit = 50;
$(window).scroll(function()
{
if (window.scrollTop < 50 && fixed)
{
$("#header").css({ position: "relative" });
fixed = false;
}
else if (window.scrollTop > 50 && !fixed)
{
$("#header").css({ position: "fixed" });
fixed = true;
}
});
Also related to this post for code example