Smooth Scrolling for absolute positioned contents - javascript

I am using this Page scroller.js to give smooth scroll effect to my page.
but it won't work.
Issue for this was that I was targeting the div which had position:absolute;. I still need this div to have position absolute and also have the smooth scroll work.
Here is my Html
<div id="wrapper">
<nav id="globalNav">
<h1><img src="img/logo.png" alt="SHISEIDO" /></h1>
<ul class="subMenu">
<li><img src="img/seperator.png" alt=""></li>
<li>TOP</li>
<li>CONCEPT</li>
<li>CONTACT</li>
<li><img src="img/seperator.png" alt=""></li>
<li><img src="img/seperator.png" alt=""></li>
<li><p class="copyright">Copyright © KOOGEN 2015<br>All rights reserved.</p></li>
</ul>
<div id="fbFeed">
<p></p>
</div>
</nav>
<div class="col-sm-8" id="left">
<div class="set">
</div><!-- set -->
</div>
<div class="col-sm-4" id="right">
<div id="inner1">
<div id="works"></div>
<div id="concept"></div>
<div id="contact"></div>
</div><!-- inner -->
</div>
</div><!-- #wrapper -->
So, #left #right divs have position absolute to create 3 column layout.
I added anchor link to my globalNav so that when I click, contents inside #right div will scroll smoothly.
heres my css added to #left and #right divs.
#left {
position: absolute;
top: 0px;
bottom: 0;
left: 218px;
width: 186px;
overflow-y: scroll;
background-color: rgba(255, 255, 255, 0.45);
padding-left: 6px;
}
#left .set{
padding-top: 230px;
}
#right {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
width: 67.5%;
}
#right #works{
padding-top: 230px;
}
#right .inner{
position: relative;
}
Any help would be much appreciated!
Thank you for your time!
UPDATE:
This is the fiddle.
http://jsfiddle.net/hirohito/Ls3jwpm9/
It works when the window's width is very narrow, but when I stretch it out to the ideal window size, smooth scroll stop working.

you can use for smooth scroll
$(document).on('click', 'a[href^="#"]', function(e) {
var id = $(this).attr('href');
var $id = $(id);
if ($id.size() === 0) {
return;
}
e.preventDefault();
var pos = $(id).offset().top;
pos = pos-95;
$('body, html').animate({scrollTop: pos});
});

Related

Position sticky works incorrect?

I'm using position: sticky to stick header that stays little lower than document starts(near 42px below). As I set up sticky position and top:0 property as I would like to use jQuery on(scroll) event to get the position of my sticky element and has changing for $.addClass(someClass) with transition.
But in console.log attached to Chrome PC browser inspector it shows always current fixed position as top:0 even if header stands at 42px off the window-top.
HTML
<body>
<div class="top-head">
<div class="container">
<div class="contact">
<div class="contact-field">
<a href="mailto:info#reen.com">
<img src="img/icon-mail.png" alt="">
<p>info#reen.com</p>
</a>
</div>
<div class="contact-field">
<a href="tel:+00 (123) 456 78 90">
<img src="img/icon-phone.png" alt="">
<p>+00 (123) 456 78 90 </p>
</a>
</div>
</div>
<div class="social-network">
<ul>
<li><img src="./img/icon-facebook.png" alt=""></li>
<li><img src="./img/icon-google.png" alt=""></li>
<li><img src="./img/icon-twitter.png" alt=""></li>
<li><img src="./img/icon-pinterest.png" alt=""></li>
<li><img src="./img/icon-behance.png" alt=""></li>
<li><img src="./img/icon-dribbble.png" alt=""></li>
</ul>
</div>
</div>
</div>
<header>
<div class="container">
<div class="header-box">
<a href="" class="logo">
<img src="./img/logo.png" alt="">
</a>
<nav>
<div>Home</div>
<div>Portfolio</div>
<div>Blog</div>
<div>Pages</div>
<div>Features</div>
<div>Mega Menu</div>
<div>Contact</div>
</nav>
<div class="search">
<button type="image" name="submitSearchIco" class="deco-button">
<img src="./img/icon-find.png" alt="Search" class="deco-button">
</button>
<button type="submit" name="submitSearch" class="subm-button" for="searchFor">
<img src="./img/icon-find.png" alt="Search" class="subm-button">
</button>
<input type="text" name="searchFor" id="search-inp" class>
</div>
</div>
</div>
</header>
SCSS
header{
position: sticky;
top: 0;
z-index: 10;
font-size: 1.25rem;
text-transform: uppercase;
background: white;
padding: 2.5% 0;
transition: padding .5s;
}
.transform-header{
padding: 1.5% 0;
}
JS:
$(window).on('scroll', function() {
console.log($('header').scrollTop());
if($('header').scrollTop() === 0){
$('header').addClass('transform-header');
}
});
Try to use like below example with your html and css code
$(document).ready(function() {
var s = $(".sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top ) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
div.wrapper {
margin: 260px auto;
width:600px;
background:#efe;
height: 3900px;
}
div.sticker {
padding: 20px;
margin: 20px 0;
background: #ece;
width: 190px;
}
.stick {
position:fixed;
top:0px;
}
.marker {
position: absolute;
top: 1000px;
right: 100px;
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="wrapper">
<div class="sticker">fixed pos </div>
</div>

Setting up an offset with anchor tags for a div

I have made a single page which has a navbar and with links pointing to section id in the page.
However, when I click on the link the section of the page scrolls down till the top of the section and due to my sticky navbar, the top part of my section goes behind it.
How do I create an offset height which would match my navbar height so that the div is visible at the right position?
Here is my a screenshot of what is happening.
Also, is there a way to smoothly scroll till the section? What is the easiest method to achieve this?
My example code:
HTML:
<nav>
<ul>
<li>Section 1</li>
<li>Sction 2</li>
<li>Section 3</li>
</ul>
</nav>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
Offsetting anchor hash tag links to adjust for fixed header
HTML :
Goto Section I
<!-- Some more content -->
<h3 id="section1" class="offset">Section I</h3>
<p>Section specific content</p>
CSS:
.offset:before {
display: block;
content: " ";
height: 150px; /* Give height of your fixed element */
margin-top: -150px; /* Give negative margin of your fixed element */
visibility: hidden;
}
Give padding-top to that section which is equal to the header height. Like if your header has a height: 40px then give padding-top: 40px to that section.
Have a look at the snippet below:
body {
margin: 0;
padding-top: 50px;
}
nav {
background: #eee;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
li {
padding: 15px;
}
.sec {
height: 200px;
margin-bottom: 30px;
background: #ff0;
padding-top: 48px;
}
<nav>
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</nav>
<div id="section1" class="sec">Section 1</div>
<div id="section2" class="sec">Section 2</div>
<div id="section3" class="sec">Section 3</div>
Hope this helps!

How to scroll up a div when hovering over another element

I have an absolute div that is behind my footer. When I hover over another element (#snapchat) I want that absolute div to scroll up from behind the footer and stop above it where it can be seen. How would I do this?
.snapcode-footer {
position: absolute;
padding-top: 20px;
text-align: center;
left: 0;
right: 0;
}
.sub-sub-footer {
position: relative;
z-index: 1;
background-color: #F7F7F7;
padding-top: 35px;
padding-bottom: 20px;
}
.sub-footer {
position: relative;
z-index: 1;
background-color: #edeeef;
margin-top: 0px;
}
<div class="snapcode-footer">
<img src="https://wumbo.com/wp-content/uploads/2016/11/snapcode.png" width="250px" height="auto" alt="Scan to add us on Snapchat!">
</div>
<div class="sub-sub-footer">
<ul class="social-footer">
<li id="twitter"><img src="/wp-content/uploads/2016/11/Twitter-color.png" alt="Follow us on Twitter #wumbo"/></li>
<li id="snapchat"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat #wumbo"/></li>
<li id="insta"><img src="/wp-content/uploads/2016/11/Instagram-color.png" alt="Follow us on Instagram #wumbo"/></li>
<li id="facebook"><img src="/wp-content/uploads/2016/11/Facebook-color.png" alt="Follow us on Facebook #wumbo"/></li>
</ul>
</div>
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-md-5-footer">
<div class="footer-img">
<img src="https://www.wumbo.com/wp-content/uploads/2016/11/HullSpar_Slogan.png" alt="Made For The Modern Seafarer™"/>
<div/>
</div>
</div>
I'm re-positioned your div.snapcode footer and applied a css property to
#snapchat:hover ~ .snapcode-footer . hopes this will help you :)
.snapcode-footer {
position: absolute;
padding-top: 90px;
text-align: center;
left: 0;
right: 0;
}
.sub-sub-footer {
position: relative;
z-index: 1;
background-color: #F7F7F7;
padding-top: 35px;
padding-bottom: 20px;
}
.sub-footer {
position: relative;
z-index: 1;
background-color: #edeeef;
margin-top: 0px;
}
#snapchat:hover ~ .snapcode-footer{
z-index:999;
color:green;
position:relative;
margin-bottom:100px;
margin-left:50px;
}
<div class="sub-sub-footer">
<ul class="social-footer">
<li id="twitter"><img src="/wp-content/uploads/2016/11/Twitter-color.png" alt="Follow us on Twitter #hullandspar"/></li>
<li id="snapchat"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat #hullandspar"/></li>
<div class="snapcode-footer">
<img src="https://hullandspar.com/wp-content/uploads/2016/11/snapcode.png" width="250px" height="auto" alt="Scan to add us on Snapchat!">
</div>
<li id="insta"><img src="/wp-content/uploads/2016/11/Instagram-color.png" alt="Follow us on Instagram #hullandspar"/></li>
<li id="facebook"><img src="/wp-content/uploads/2016/11/Facebook-color.png" alt="Follow us on Facebook #hullandspar"/></li>
</ul>
</div>
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-md-5-footer">
<div class="footer-img">
<img src="https://www.hullandspar.com/wp-content/uploads/2016/11/HullSpar_Slogan.png" alt="Made For The Modern Seafarer™"/>
</div>
</div>
</div>
I'd suggest giving snapcode-footer an id to make it easier to control.
<div class="snapcode-footer" id="snapcode">
<script>
var hover = 0;
</script>
Then you make a script on #snapchat
<li id="snapchat"onmouseenter="hover = 1" onmouseout="hover = 0"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat #hullandspar"/></li>
Lastly, you make a script for if the mouse is hovering over the #snapchat element to increase height or to stay in one place
<script>
setInterval("if(hover == 1){snapcode.top--}");
setInterval("if(hover == 0){snapcode.top = 0}");
</script>

How to make an image in a separate div change on hover of nav?

I have a site I'm working on where I have a nav bar in a div at the top of the page followed by a separate div which contains an image directly below it.
I'm trying to figure out the best way to change the image by hovering over each part of the nav bar.
Basically I want an image for home to show up when the home nav feature is hovered and so on with the rest of the menu.
UPDATE:
As I tried to explain before (not as clear as I could have) I want to make each nav bar element (Home, Downloads, etc.) show a different image in the div below it. Here is the section of code for the two elements.
<li class="active">Home</li>
<li >About</li>
<li >Mods</li>
<li>Forums</li>
<li >Downloads</li>
<li>Blog</li>
</ul>
</div>
</nav>
<div class="parallax-container">
<div class="container" style="background: rgb(55,71,79); width:960px; padding-top: 10px; padding-left: 50px; border: 2px; border-radius: 50px;">
<div class="row">
<div class="hover-image white-text col s12 l6">
<img src="homeimage.png" class="hover image" style="height:auto; width:auto; max-width: 860px; max-height: 860px;"/>
<h5 class="hover-header" style="padding-left: 20px;">Home</h2>
<p class="hover-paragraph" style="padding-left: 25px;">Welcome to the page!</p>
</div>
</div>
</div>
<div class="parallax"><img src="/img/image.png"></div>
</div>
<style>
.hover-image {
position: relative;
width: 100%;
margin: auto;
}
.hover-header {
position: absolute;
top: 350px;
left: 10;
width: 100%;
}
.hover-paragraph {
position: absolute;
top: 380px;
width: 100%;
}
</style>
Page Layout
Try CSS something like this;
.nav:hover .image{
background-image: url('path/to/image.ext');
}
If you can share your code, I can be more specific.
try this code -
CSS -
#navImage img{
display:block;
width:500px;
height:auto;
}
#myNav{
list-style-type: none;
}
#myNav li {
display: inline;
padding: 10px;
}
#myNav li a:hover {
color:#00ffff;
}
#navImage img{
display:none;
}
HTML
<ul id="myNav">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<div id="navImage">
<img src="img_chania.jpg" alt="Chania">
<img src="img_chania2.jpg" alt="Chania">
<img src="img_flower.jpg" alt="Flower">
<img src="img_flower2.jpg" alt="Flower">
</div>
JS to initialize (with jQuery) -
$("#myNav li a").on('mouseover', function(){
$("#navImage img").hide().eq($(this).closest('li').index()).show();
});
Please note, if you are working on responsive design(using bootstrap navigation), you need to do changes accordingly.
jsfiddle - https://jsfiddle.net/guruling/k2zgot5r/
.myButtonLink {
display: block;
width: 100px;
height: 100px;
background: url('/path/to/myImage.png') bottom;
text-indent: -99999px;
}
.myButtonLink:hover {
background-position: 0 0;
}
<a class="myButtonLink" href="#LinkURL">Leaf</a>
Do you want something like this. Please check this link:-http://kyleschaeffer.com/development/pure-css-image-hover/

Angular-carousel is not showing / not working

When I use the angular-carousel directives, the content is not showing:
<ul rn-carousel rn-carousel-controls rn-carousel-index="carouselIndex" rn-carousel-buffered >
<li ng-repeat="slide in slides track by slide.id" >
<div class="text-center main-hiw-description">
<img class="img-circle img-hiw" src="{{slide.image}}" alt="logo" />
<h4>{{slide.title}}</h4>
<p>
{{slide.description}}
</p>
</div>
</li>
</ul>
Link
To display the content you have to add a ccs height and width:
ul {
height:300px;
width: 600px;
background:blue;
}
Most of the examples contain that css rule at the begging:
http://www.ceus-now.com/rn-carousel-not-showing-image-on-screen/
http://jsfiddle.net/3QBEE/
http://plnkr.co/edit/VruPSSkVK47YgeUwYO7l?p=preview
Or you can add a ccs rule to adjust the height to the content(personally I recommend this option):
ul[rn-carousel] {
> li {
position: relative;
margin-left: -100%;
&:first-child {
margin-left: 0;
}
}
}

Categories