I have a musicplayer fixed on the bottom of the screen and when I scroll 300px he should start to scroll with the rest of the content. All that works fine at the computer but not on mobile. Its dificult to explain this with my skill in english.
I made a jsfiddle but i cant get it to work there. In my project it works. The musicplayer should start to scroll after i scrolled 300px. If it would work it wouldnt work on mobiles correctly. On mobile it is jerky and dont refresh the position when i am scrolling. only when i stop the scrolling it jumps to the correct position. But it is not smooth like on the computer.
<body>
<div id="content">
//long text see jsfiddle
</div>
<div id="musicplayer">
<div id="control">Musicplayer: play/pause</div>
</div>
</body>
my css:
#content {
width: 2000px;
background-color: black;
color: white;
margin-bottom: 300px;
}
#musicplayer {
position: fixed;
bottom: 0px;
width: 100%;
height: 100px;
background-color: #485670;
z-index: 5;
color: white;
}
my javascript:
$(window).scroll(function () {
if ($(window).scrollTop() >300) {
$('#musicplayer').css('bottom', $(window).scrollTop()-300);
}
else if($(window).scrollTop() < 300) {
$('#msuciplayer').css('bottom', 0)
}
});
Edit:
I got an idea. but at the moment i dont have time to try it out anymore. I try it tomorrow.
Related
There is a lot of information online regarding header effects on scroll and I've spent a lot of time trying to figure this out on my own. I was hoping to find a way to do this without using JS but there doesn't seem to be a way. I've tried just adding a simple effect (changing height of header on scroll) using JS ... hoping that once I got the header to actually respond to this I could work with it to make the effects that I'm wanting. But I can't even get the header to respond. Ultimately I'm wanting the header to slightly reduce in height, the logo will change to a different image and there will be a 15px colored border added to the bottom. I know that's a lot for a novice web designer to try to attempt but I'd really love to figure out how to do it. Any help or direction to good online resources for this would be so appreciated.
I'm adding only my html and css just to keep things less cluttered. I can add what I've tried in my js file if I need to. I've commenting out some css that went with the js that clearly doesn't work. Thanks in advance for your time.
<header>
<div id="nav">
<div id="nav_left">
HOME
SERVICES
PORTFOLIO
</div>
<a href="index.html" id="logo" class="noHover"><img src="images/logo_6_small.png" alt="Claire Crawford"
id="logo_Claire" /></a>
<div id="nav_right">
BLOG
ABOUT
GET IN TOUCH
</div>
</div>
</header>
header {
height: 160px;
position: fixed;
top: 0;
width: 100%;
background: white;
/* border-bottom: 15px solid rgb(197, 179, 55) */
}
/* header border on scroll
header.fixed.scrolled .header_bottom .container_inner {
border-bottom: 1px solid #0a0a0a;
} */
/* header.sticky {
height: 120px;
} */
/* header {
transition: padding 300ms ease;
} */
try to use this code in your actual code. It might work well
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('#logo img').attr('src', 'http://placehold.it/220?text=Original+Logo!');
$("#nav").css("border-bottom", "none");
}
if ($(this).scrollTop() < 200) {
$('#logo img').attr('src', 'https://cdn-images-1.medium.com/max/1600/1*4mdh6im57oFHSNY4syD_2Q.png');
$("#nav").css("border-bottom", "2px solid red");
}
})
});
header {
height: 160px;
position: fixed;
top: 0;
width: 100%;
background: white;
/* border-bottom: 15px solid rgb(197, 179, 55) */
}
.wrapper {
height: 1000px;
}
img {
width: 100px;
}
#nav {
width: 100%;
display: flex;
height: 110px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<header>
<div id="nav">
<div id="nav_left">
HOME
SERVICES
PORTFOLIO
</div>
<img src="https://cdn-images-1.medium.com/max/1600/1*4mdh6im57oFHSNY4syD_2Q.png" alt="Claire Crawford" id="logo_Claire" />
<div id="nav_right">
BLOG
ABOUT
GET IN TOUCH
</div>
</div>
</header>
</div>
I am telling you step by step:
1. add this to your index.html page. you need to add jquery to work this code. <script src="code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
2. Then copy paste my code into your js file and edit it as you want.
3. i have write a funtion to scroll. you can see i have write 200 so that if you scroll 200px below the logo will change. so there are two condition I have written
if ($(this).scrollTop() > 200) {
$('#logo img').attr('src', 'http://placehold.it/220?text=Original+Logo!');
$("#nav").css("border-bottom", "none");
}
this one is for after you scroll 200px and the other one is your initial stage.
$('#logo img').attr('src', 'http://placehold.it/220?text=Original+Logo!');
here #logo is the id from html and img is for img inside logo div.
4.$("#nav").css("border-bottom", "none"); nav is for nav div and I added border css by adding .css here
My problem is along the lines of these previous issues on StackOverflow but with a slight difference.
Previous issues:
Stopping fixed position scrolling at a certain point?
Sticky subnav when scrolling past, breaks on resize
I have a sub nav that starts at a certain position in the page. When the page is scrolled the sub nav needs to stop 127px from the top. Most of the solutions I have found need you to specify the 'y' position of the sub nav first. The problem with this is that my sub nav will be starting from different positions on different pages.
This is the JS code i'm currently using. This works fine for one page but not all. Plus on mobile the values would be different again.
var num = 660; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
I'm looking for a solution that stops the sub nav 127px from the top no matter where on the page it started from.
You can use position: sticky and set the top of the sub-nav to 127px.
See example below:
body {
margin: 0;
}
.main-nav {
width: 100%;
height: 100px;
background-color: lime;
position: sticky;
top: 0;
}
.sub-nav {
position: sticky;
width: 100%;
height: 50px;
background-color: red;
top: 100px;
}
.contents {
width: 100%;
height: 100vh;
background-color: black;
color: white;
}
.contents p {
margin: 0;
}
<nav class="main-nav">Main-nav</nav>
<div class="contents">
<p>Contents</p>
</div>
<nav class="sub-nav">Sub-nav</nav>
<div class="contents">
<p>More contents</p>
</div>
Please see browser support for sticky here
You should change your code to the below, should work fine:
$(window).bind('scroll', function () {
if ($(window).scrollTop() > $(".menu").offset().top) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
Maybe you can try this:
Find navigation div (.menu)
Find the top value of the .menu (vanilla JS would be menuVar.getBoundingClientRect().top, not sure how jQuery does this).
Get top value of browserscreen.
Calculate the difference - 127px.
When the user scrolls and reaches the top value of the menu -127px -> addClass('fixed').
I'm trying to create a fixed navbar that fades while the user is scrolling and and becomes opaque when the user isn't, but I'm not sure how to trigger the fadeTo command when they have stopped scrolling. I've played around and searched for .promise() but i can't figure out the exact usage. I'm new to JS/JQuery and I am in the midst of a school project.
JQuery:
$(window).scroll(function() {
$("#top").fadeTo(300, 0.5);
$("#top").fadeTo(300, 1);
});
#top is the navbar.
Any help is appreciated, and try to explain your answers as it helps me learn.
Thanks, Lachlan.
When mouse scrolled, create timer and if after spending time page didn't scroll, show target element.
var timer;
$(window).scroll(function(){
clearTimeout(timer);
timer = setTimeout(function(){
$("#nav").fadeIn("fast");
}, 500);
$("#nav").fadeOut("fast");
});
body {
height: 1000px;
position: relative;
}
#nav {
width: 100%;
height: 50px;
position: fixed;
top: 0px;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav"></div>
I need to make a scrollable div, scroll even if the mouse is upon the content (inside the scrollable div), and not just beside it (Where it is blank). This is what I have so far:
var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight-main.offsetHeight;
main.parentNode.parentNode.onscroll = function() {
main.style.top = Math.min(this.scrollTop,maxTop) + "px";
}
In Chrome is ok
In IE8+ is ok (i know a hack)
In Safari the content shakes a lot when i scroll, can i fix that? (I want fix this)
Working fiddle -> https://jsfiddle.net/8oj0sge4/6/
var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight - main.offsetHeight;
main.parentNode.parentNode.onscroll = function() {
main.style.top = Math.min(this.scrollTop, maxTop) + "px";
}
#wrapper {
width: 100%;
height: 1500px;
border: 1px solid red;
padding-top: 380px;
}
#wrapper .container {
border: 1px solid green;
width: 100%;
height: 500px;
overflow: scroll;
}
#wrapper .container-scroll {
height: 1500px;
width: 100%;
border: 1px solid yellow;
position: relative;
}
#wrapper .main {
width: 200px;
height: 500px;
background: black;
overflow: scroll;
position: absolute;
color: white;
left: 50%;
margin-left: -100px;
margin-top: 10px;
}
<div id="wrapper">
<div class="container">
<div class="container-scroll">
<div id="main-site" class="main">
My goals is to make the div container scroll also when the mouse is hover this div in safari, in Google and IE8 i already know how to make work, but safari is shaking a lot!
</div>
</div>
</div>
</div>
Thank you guys.
I hope this demo helps you out to make the div content scroll when mouse hover and when mouse out of the div.
<html>
</head>
<style>
.mydiv
{height: 50px;width: 100px; overflow-y: scroll; }
</style>
<script>
function loadpage()
{ document.getElementById('marquee1').stop(); }
function marqueenow()
{ document.getElementById('marquee1').start(); }
</script>
</head>
<body onload="loadpage()">
<marquee id="marquee1" class="mydiv" onmouseover="marqueenow()" onmouseout="loadpage()" behavior="scroll" direction="up" scrollamount="10">
This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test
content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content
</marquee>
</body>
</html>
you just add this js file to get a smooth scrolling effect.
https://github.com/nathco/jQuery.scrollSpeed
live deomo
http://code.nath.co/scrollSpeed
Not 100% sure what you are up to but you can get the fixed position with css "fixed". It will stay where you put it. The following css fixes to the bottom of the page.
.fixed {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: auto;
}
There is already an answer on scroll position:
How to get scrollbar position with Javascript?
I don't know important is that content, and by this I mean if it needs to stay selectable.
If not a pretty good solution would be to use #wrapper .main{ pointer-events: none; }, meaning that the content will not get any events from mouse and it would go through it to the next element behind it - in your case the scroll would go dirrectly to #wrapper.
Safari does this because every browser has its own scrolling. If you have a fixed header on a phone it acts bouncy and if you do this on a PC it acts normal. Explorer scrolls smooth and Chrome scrolls right to the place without a smooth transition.
The reason why your #main-site is "jiggling" is because the browser keep "repaint" the position of this element.
One Trick to solve this is called Debounce Function, (you may also google it to see other variations.) The basic idea is to delay the scroll event handler to clear out those untriggered callbacks.
In your case, you may do something like this:
main.parentNode.parentNode.onscroll = function(event) {
debounce(offsetting, 10);
}
function offsetting() {
main.style.top = Math.min(main.parentNode.parentNode.scrollTop,maxTop) + "px";
}
function debounce(method, delay) {
clearTimeout(method._tId);
method._tId= setTimeout(function(){
method();
}, delay);
}
If you keep seeing the jiggling issue, you can simply edit the delay parameter (i.e, change 10 to 50). The downside for that is your #main-site element will be 'cut off the top` for a while, depending on your delay settings.
Since your code works perfectly on Chrome and IE, there might be a bug on scrollHeight or offsetHeight attribute on Safari. I recommend you to use getBoundingClientRect for calculating element position since this method is more reliable and accurate.
var maxTop = main.parentNode.getBoundingClientRect().height - main.getBoundingCLientRect().height;
so I wanted an animated footer for my webpage using jquery. There's supposed to be a button which should trigger the animation. I found a nice example for all this, and everything is fine and dandy. Except that the button (including the footer) has this code that makes it stick to the bottom of your web browser, rather than to the bottom of the page. I do [i]not[/i] want it to, like, "scroll" along with the page, I realy want it to be underneath all my other divs. I tried putting it in the div container (which has all my other divs in it as well), but that doesn't seem to work.
Now, (after 2.5 hours of googling) I found out that it might/may/could have something to do with "absolute" positioning in the CSS, so I tried switching some things around such as giving the footer's container a relative position or giving it an "overflow: hidden;" along with the rest a left float but nothing seemed to solve my problem. (I could've done something wrong, not that great with CSS after all :-/)
I hope someone is able/willing to help.
P.S. Here's the example I used:
http://return-true.com/2010/04/jquery-pop-up-footer-version-2/
and here's the code:
Javascript:
jQuery(function($) {
var open = false;
$('#footerSlideButton').click(function () {
if(open === false) {
$('#footerSlideContent').animate({ height: '300px' });
$(this).css('backgroundPosition', 'bottom left');
open = true;
} else {
$('#footerSlideContent').animate({ height: '0px' });
$(this).css('backgroundPosition', 'top left');
open = false;
}
});
});
HTML:
<div id="footerPlacement">
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent">
<div id="footerSlideText">
<h3>Hey! I'm a Sliding Footer</h3>
<p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p>
<p>What can you use me for? Well look at all this stuff:</p>
<ul>
<li>Sales information</li>
<li>Important updates</li>
<li>Unobtrusive about panel</li>
<li>Or just a good ol' footer</li>
</ul>
<p>There are obviously many other uses, but these are the few useful ones I can think of.</p>
</div>
</div>
</div>
</div>
CSS:
#footerPlacement {
margin-bottom: 0px;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#footerSlideContainer {
position: fixed;
margin-left: 0px;
bottom:0px;
width: 1000px;
}
#footerSlideButton {
background: url('../images/footer/footerbtn.png') top left no-repeat transparent;
position: absolute;
top: -55px;
right: 20px;
width:50px;
height:50px;
border: none;
cursor: pointer;
}
#footerSlideContent {
width: 100%;
height: 10px;
background: #251b15;
color: #CCCCCC;
font-size: 0.8em;
border: none;
font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideText {
padding: 15px 10px 25px 25px;
}
Thanks in advance!
if you change your #footerPlacement to include position:relative, you can change #footerSlideContainer to be position:absolute and then your footer will sit below any content above it.
However you will need to make the content have a min-height of around 350px for the footer to work properly and if your content isn't long enough, the footer won't be at the bottom of the browser.
I also added overflow:hidden to #footerSlideContent. I have made a fiddle to demonstrate:
http://jsfiddle.net/tc6b8/