I'm trying to stick my navbar to the top of the window, After window scrolling about 50px that navbar wasn't stick anymore. could anyone solve my problem. i'm stuck. I don't have proper knowledge about javascript and materialize css
thanks in advance
<!--Style-->
<style>
.header{
width: 100%;
height: 50px;
padding: 2px 30px;
}
.box{
height: 500px;
margin-top: 100px;
}
.sticky-nav{
position: fixed;
top: 0;
width: 100%;
}
</style>
<!--Adding JQuery Script for Sticky navbar-->
<script>
$(window).scroll(function() {
if($(this).scrollTop()>50){
$('nav').addClass('sticky-nav');
}else{
$('nav').removeClass('sticky-nav');
}
});
</script>
</head>
<body>
</div>
<!--navbar-->
<nav>
<div class="nav-wrapper">
<div class="container">
<ul>
<li>Home</li>
<li>Article</li>
<li>Login</li>
<li>Signup</li>
<li>India</li>
</ul>
</div>
</div>
</nav>
<!--Sample Boxes -->
<div class="container">
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</div>
</body>
</html>
It is "sticky" and works as it should :
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('nav').addClass('sticky-nav');
} else {
$('nav').removeClass('sticky-nav');
}
});
.header {
width: 100%;
height: 50px;
padding: 2px 30px;
}
.box {
height: 500px;
margin-top: 100px;
}
.sticky-nav {
position: fixed;
top: 0;
width: 100%;
}
nav {
background-color: skyblue;
}
body {
height: 1000vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div class="nav-wrapper">
<div class="container">
<ul>
<li>Home</li>
<li>Article</li>
<li>Login</li>
<li>Signup</li>
<li>India</li>
</ul>
</div>
</div>
</nav>
Try the following please:
Change CSS to:
.sticky-nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
padding: 10px 0;
z-index: 999;
}
Change JS to:
let scrollTopY = window.pageYOffset || document.body.scrollTop;
let navigation = document.querySelector('nav');
window.addEventListener('scroll', function() {
if(scrollTopY > 50) {
navigation.classList.add('sticky-nav');
} else {
navigation.classList.remove('sticky-nav');
}
}
Feel free to accept if this works for you.
Related
i try to use scrollTop ,
when user Click on the ( li ) element i get the (data-id) from (li) and scroll to the box in aside that have the same id;
problem is when i click the for example (li) number 2 every things fine but when i click it again aside scroll back to top and if you click rapidly it get worst
var aside = $('.aside');
$("li").on('click',function (){
id = $(this).data("id")
$('.aside').animate({
scrollTop: $('div.item[data-id="' + id + '"]').offset().top
}, 300, 'linear')
});
html,body {
width: 100%;
height: 100%;
float: right;
margin:0;
padding: 0;
}
.aside {
height: 100%;
width: 400px;
position: fixed;
top: 0;
right:0;
background: #ccc;
overflow-y: scroll;
}
.estateWrap {
width: 100%;
height: 100%;
float: right;
margin: 0;
padding: 0;
}
.item {
float: right;
margin: 0px;
padding:0px;
width: 100%;
height: 150px;
background: #f5f5f5;
margin-bottom: 100px
}
<html>
<head>
<meta charset="UTF-8">
<title> index </title>
<script src="jQuery.min.js"></script>
</head>
<body>
<ul>
<li data-id="1">1</li>
<li data-id="2">2</li>
<li data-id="3">3</li>
<li data-id="4">4</li>
</ul>
<div class="aside">
<div class="estateWrap">
<div class="item" data-id="1">1</div>
<div class="item" data-id="2">2</div>
<div class="item" data-id="3">3</div>
<div class="item" data-id="4">4</div>
</div>
</div>
</body>
</html>
You need to consider that the offset top position of your item elements change after they have been scrolled. The top value becomes 0. That is why after you click on the same link again it will go all the way up to 0.
You could add the current top position of the parent aside element like so:
var aside = $('.aside');
function scrollAside (topPos) {
aside.animate({
scrollTop: topPos
}, 300, 'linear')
}
$("li").on('click',function () {
var id = $(this).data("id"),
crntScrollPos = aside.scrollTop(),
top = $('div.item[data-id="' + id + '"]').offset().top;
if (top + crntScrollPos !== crntScrollPos) {
scrollAside(top + crntScrollPos);
}
});
html,body {
width: 100%;
height: 100%;
float: right;
margin:0;
padding: 0;
}
.aside {
height: 100%;
width: 400px;
position: fixed;
top: 0;
right:0;
background: #ccc;
overflow-y: scroll;
}
.estateWrap {
width: 100%;
height: 100%;
float: right;
margin: 0;
padding: 0;
}
.item {
float: right;
margin: 0px;
padding:0px;
width: 100%;
height: 150px;
background: #f5f5f5;
margin-bottom: 100px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li data-id="1">1</li>
<li data-id="2">2</li>
<li data-id="3">3</li>
<li data-id="4">4</li>
</ul>
<div class="aside">
<div class="estateWrap">
<div class="item" data-id="1">1</div>
<div class="item" data-id="2">2</div>
<div class="item" data-id="3">3</div>
<div class="item" data-id="4">4</div>
</div>
</div>
Use position instead of offset:
position();
Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
I know how to use position: fixed; to get it to scroll with the page but my navbar is not at the top of the page it is under my header. I would like the navbar to remain directly under the header until the top of the page hits it then I want it to scroll down with the page. I have tried using JS to do this and using JSfiddle I am able to get it working http://jsfiddle.net/uaqh018d/78/
However, when I apply this to my site it does not work and I can't figure out why.
site code to follow:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--begin header & navbar-->
<div class="header">
<div class="container">
<div class="banner">
<h1><img src="media/CSG%20header%20final.svg" width="961" height="250" alt="crit strike gaming header"></h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Reviews</li>
<li>Previews</li>
<li>Lets Plays</li>
<li>Forums</li>
</ul>
</div>
</div>
</div>
<!--end header & navbar-->
<!-- begin content-->
<div class="container">
<div class="content">
</div>
</div>
<!--end content-->
<script type="text/javascript" src="navfunction.js"></script>
</body>
</html>
CSS
body{
background: #ffda0a;
width: 100%;
margin: auto;
}
.container{
width: 960px;
margin: 0 auto;
}
.header{
width: 100%;
height: 250px;
margin: 0 auto;
top: 0;
}
.content{
background-color: rgba(255,255,255,.5);
width: 100%;
margin: 0 auto;
margin-left: 1px;
clear: both;
}
a{
text-decoration: none;
color: #ffda0a;
}
li{
list-style: none;
margin-left: 75px;
float: left;
font-size: 25px;
}
.nav{
background: #a71e1f;
width: 960px;
height: 30px;
margin-left: 1px;
}
.nav.fixed {
display: block;
position: fixed;
top: 0;
width: 100%;
}
.banner{
height: 230px;
}
JS
$(document).ready(function() {
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('#header').height())
{
$('#nav').addClass('fixed');
}
else
{
$('#nav').removeClass('fixed');
}
});
});
If anyone can figure out the issue I would really appreciate it.
See the corrected fiddle - http://jsfiddle.net/drecodeam/8Lubmkvw/
You were using classes in the HTML but accessing them as ID in jQuery.
Corrected JS should be
$(document).ready(function () {
$(window).scroll(function () {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.header').height()) {
$('.nav').addClass('fixed');
} else {
$('.nav').removeClass('fixed');
}
});
});
I have a little trouble with scrolling the div content only on mouse move. So no scrollbars are shown etc.
So I have 17 items. Every item is square 50x50 px. Mask is 300x50. So my mask is overflow: hidden and itemsWrapper has width of all subitems. I want to make scroll items horizontally on mousemove event. Can enyone give me some advice on this?
For now I have the following code:
$(document).ready(function() {
$('#navMask').on('mousemove', function(e) {
var leftOffset = $(this).offset().left;
$('#itemsWrapper').css('left', -e.clientX + leftOffset);
console.log($(this).outerWidth() + ' - ' + $(this)[0].scrollWidth);
});
});
#navMask {
position: relative;
overflow: hidden;
background: #ccc;
margin: 0 5px;
width: 300px;
height: 50px;
}
#tabWrapper {
position: absolute;
margin-left: 0;
}
.tab {
width: 50px;
height: 50px;
float: left;
background: beige;
}
.tab:hover {
background: #e4e4a1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='navMask'>
<div id='itemsWrapper'>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
<div class='item'>5</div>
<div class='item'>6</div>
<div class='item'>7</div>
<div class='item'>8</div>
<div class='item'>9</div>
<div class='item'>10</div>
<div class='item'>11</div>
<div class='item'>12</div>
<div class='item'>13</div>
<div class='item'>14</div>
<div class='item'>15</div>
<div class='item'>16</div>
<div class='item'>17</div>
</div>
</div>
Also the number of items can be dynamically changed so I have another trouble to make it working.
Is this almost what you intends??
Just add the following style rules:
#itemsWrapper {
position: absolute;
}
.item {
width: 100px;
display: inline-block;
}
Demo
$(document).ready(function() {
$('#navMask').on('mousemove', function(e) {
var leftOffset = $(this).offset().left;
$('#itemsWrapper').css('left', -e.clientX + leftOffset);
console.log($(this).outerWidth() + ' - ' + $(this)[0].scrollWidth);
});
});
#navMask {
position: relative;
overflow: hidden;
background: #ccc;
margin: 0 5px;
width: 300px;
height: 50px;
}
#tabWrapper {
position: absolute;
margin-left: 0;
}
.tab {
width: 50px;
height: 50px;
float: left;
background: beige;
}
.tab:hover {
background: #e4e4a1;
}
#itemsWrapper {
position: absolute;
}
.item {
width: 100px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='navMask'>
<div id='itemsWrapper'>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
<div class='item'>5</div>
<div class='item'>6</div>
<div class='item'>7</div>
<div class='item'>8</div>
<div class='item'>9</div>
<div class='item'>10</div>
<div class='item'>11</div>
<div class='item'>12</div>
<div class='item'>13</div>
<div class='item'>14</div>
<div class='item'>15</div>
<div class='item'>16</div>
<div class='item'>17</div>
</div>
</div>
I've been messing with this code for awhile now and I'm stuck. I've done a lot of coding by hand but just now ramping up on the new things with HTML5, CSS3, and Javascript.
I'm trying to make a simple menu that slides up and down. I have a div that contains everything. The div has overflow set to hidden so when the menu is out of the viewing box, it can't be seen. It can then animate in and out of the view box.
I've been trying to do it with a Javascript function but it sounds like it's easier to just use CSS3 transitions? Any advice?
My Javascript code is below. I can't quite figure out how to do it with CSS3 transitions. Any advice would be much appreciated.
Html
<header>
<nav>
<div id="mobileMenu" class="mobileMenu">
<div id="mobileMenuWrapper" class="mobileMenuWrapper">
<div style="height: 100px; width: 100%;">
<div style="height: 100px; width: 100%; background-color: black; color: white;">
Menu option<br>Menu option<br>Menu option
</div>
</div>
<div style="position: relative; height: 50px; width: 100%; left: 50px;">
<div style="height: 50px; width: 125px; background-color: black; color: white; text-align: center;">Menu</div>
</div>
</div>
</div>
</nav>
</header>
Javascript
var startPosition = -100;
var endPosition = 0;
var speed = 2;
function moveMenuDown(){
// Get the element
menu = document.getElementById("mobileMenuWrapper");
// Grab the element's current CSS top position
currentPosition = Number(menu.style.top.substr(0,(menu.style.top.length-2)));
// Compare the position and move it
if(currentPosition <= endPosition){
// I'm stuck about the line below...how can I attach a CSS3 transition here? Or should I?
menu.style.MozTransition = ???;
// Here's my original code where I move the element manually
menu.style.top = (currentPosition + speed) + 'px';
moveMenuDown();
}else{
}
}
Updated entire HTML/CSS/JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Menu test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.mobileMenu {
position: absolute;
height: 150px;
width: 250px;
top: 0px;
left: 50px;
overflow: hidden;
}
#mobileMenuWrapper {
margin-top:-100px;
transition: margin-top 0.5s ease;
}
#mobileMenuWrapper.show {
margin-top:0px;
}
</style>
<script type="text/javascript">
function moveMenuDown(){
menu = document.getElementById("mobileMenuWrapper hide");
if(menu.className=="mobileMenuWrapper hide"){
menu.className = menu.className.replace('hide','show');
}else{
menu.className = "mobileMenuWrapper hide";
}
}
</script>
</head>
<body>
<header>
<nav>
<div id="mobileMenu" class="mobileMenu">
<div id="mobileMenuWrapper" class="mobileMenuWrapper hide">
<div style="height: 100px; width: 100%;">
<div style="height: 100px; width: 100%; background-color: black; color: white;">
Menu option<br>Menu option<br>Menu option
</div>
</div>
<div style="position: relative; height: 50px; width: 100%; left: 50px;">
<div style="height: 50px; width: 125px; background-color: black; color: white; text-align: center;">Menu</div>
</div>
</div>
</div>
</nav>
</header>
</body>
</html>
HTML: one additional class:
<header>
<nav>
<div id="mobileMenu" class="mobileMenu">
<div id="mobileMenuWrapper" class="mobileMenuWrapper hide">
<div style="height: 100px; width: 100%;">
<div style="height: 100px; width: 100%; background-color: black; color: white;">
Menu option<br>Menu option<br>Menu option
</div>
</div>
<div style="position: relative; height: 50px; width: 100%; left: 50px;">
<div style="height: 50px; width: 125px; background-color: black; color: white; text-align: center;"><a id="move" href="javascript:moveMenuDown();">Menu</a></div>
</div>
</div>
</div>
</nav>
</header>
CSS: (very simple)
#mobileMenuWrapper{
margin-top:-100px;
transition: margin-top 0.5s ease;
}
#mobileMenuWrapper.show{
margin-top:0px;
}
*just added class and transition.
JS, much simpler:
function moveMenuDown(){
menu = document.getElementById("mobileMenuWrapper");
if(menu.className=="mobileMenuWrapper hide"){
menu.className = menu.className.replace('hide','show');
}
else {
menu.className = "mobileMenuWrapper hide";
}
}
('toggle' functionality added)
Fiddle: http://jsfiddle.net/8u0eka5x/
Task:
Make a chat on Skype in HTML.
Problem:
No scrolling content after adding a new message.
Description:
There is a common site structure: header, content and footer. It is necessary that the content would be "hiding" under the header, but in the visible part of the window remained only part of the content (lower (message history on Skype)).
When you add a new message, the content must scrolling up to the height of this, new messages, and the message should appear at the bottom of the central block of the site (content), but should not go under the footer.
In this case it shall remain possible scrolling.
HTML:
<body>
<div id="header">HEADER</div>
<div id="sidebar" class="f_left">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div id="container" class="f_right">
<div id="wrap3">
<div id="wrap2">
<div id="wrap1">
<div id="content">
<div id="im_nav_wrap">asdasdasdasd</div>
<div id="im_content">
<div class="im_rows_wrap">
<div id="im_rows" class="im_peer_rows">
<div class="mes">sddsfsdfsdfsdf</div>
<div class="mes">sdfdfsdf</div>
<div class="mes">fsdfsdf</div>
<div class="mes">sdfsdf</div>
<div class="mes">fsdfsdf</div>
<div class="mes">fdsfsdfsdf</div>
<div class="mes">fdsfsdfsdf</div>
</div></div>
</div>
<div id="im_footer_wrap">
<textarea name="dialog" id="im_textarea" cols="50" rows="6"></textarea>
<button onclick="IM.send(this);">submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
body {
width: 980px;
margin: 0 auto;
}
#header {
top: 0;
z-index: 100;
text-align: center;
width: 980px;
position: fixed;
height: 40px;
background: #cdcdcd;
}
#sidebar {
top: 60px;
width: 200px;
height: 100px;
background: #666;
position: fixed;
}
.f_right {
width: 600px;
float: right;
}
#content {
}
#im_nav_wrap {
position: fixed;
top: 40px;
z-index: 100;
width: 400px;
height: 70px;
background: #ff0ccc;
}
#im_content {
padding: 120px 0 150px ;
}
#im_rows {
}
.im_rows_wrap {
position: relative;
}
#im_rows {
position: absolute;
bottom: 80px;
width: inherit;
}
.mes {
width: 200px;
padding: 10px;
background: #f6f6f6;
margin-top: 10px;
}
#im_footer_wrap {
height: 100px;
width: 300px;
position: fixed;
bottom: 20px;
}
JS:
$(document).ready(function() {
$('.im_rows_wrap').height($('#im_rows').height());
});
IM = {
send: function(el) {
var ta = $(el).prev('textarea').val();
if (ta) {
$('#im_rows').append('<div class="mes">' + ta + '</div>');
$('.im_rows_wrap').height($('.im_rows_wrap').height() + $( ".mes" ).last().height())
}
}
};
So you want something like:
http://jsfiddle.net/CLzfW/7/
Using a bit of jQuery
$('.button').click(function(e){
e.preventDefault();
$('.expander').slideToggle();
$('html, body').animate({scrollTop: $(document).height()}, 'slow');
});
It scrolls to the bottom of the div on an event click (e.g button click, new message) and you also want a scroll bar on it?