I've got a webpage with 2 different sections. Each are the height of the viewport. One has a button 'work' in the center. When this is clicked, that disappears and some links appear where it was. The same sort of thing applies for the next section.
I'm trying to add a reset function to remove the links and add the buttons back. I originally tried to make one button reset all sections but, after that didn't work, I'm now trying to make an individual button for each section.
I've done this but my problem is that the second section's reset button appears in the same place as the first section's one. Both should appear at the bottom right section of their respective sections.
function openSites(categoryType) {
if (categoryType == "work") {
var sites = document.getElementById("workSites");
var button = document.getElementById("workButton");
} else if (categoryType == "other") {
var sites = document.getElementById("otherSites");
var button = document.getElementById("otherButton");
}
sites.classList.add("show");
sites.classList.remove("hide");
button.classList.add("hide");
}
function reset(categoryType) {
if (categoryType == "work") {
var sites = document.getElementById("workSites");
var button = document.getElementById("workButton");
} else if (categoryType == "other") {
var sites = document.getElementById("otherSites");
var button = document.getElementById("otherButton");
}
sites.classList.remove("show");
sites.classList.add("hide");
button.classList.remove("hide");
}
function betterReset() {
for (category in document.getElementsByClassName("category-container")) {
document.write(category);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
display: inline-block;
overflow: hidden;
width: 100%;
height: 100vh;
}
#page-1 {
display: block;
background-color: #3faae4;
}
#page-2 {
display: block;
background-color: #ffffff;
}
.pointer {
cursor: pointer;
}
#work {
height: 100%;
width: 100%;
}
#other {
height: 100%;
width: 100%;
}
#workSites {
height: 100%;
width: 100%;
}
#otherSites {
height: 100%;
width: 100%;
}
.sites {
list-style-type: none;
height: 100%;
}
.site {
padding: 50px 0px;
flex-grow: 1;
text-align: center;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
.category-container {
height: 100%;
}
.category-button {
border: solid 0.5px;
padding: 60px;
}
.buttonClose {
position: absolute;
border: solid 0.5px;
border-radius: 5px;
right: 3px;
bottom: 0px;
width: 70px;
height: 35px;
}
.show {
display: block;
}
.hide {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Nick's site</title>
<link rel="stylesheet" type="text/css" href="./styles3.css">
<meta name="viewport" content="width= device-width, inital-scale=1">
</head>
<body>
<div id="page-1" class="page">
<div id="work">
<div id="workButton" class="category-container center">
<a class="category-button pointer" onclick="openSites('work')">Work</a>
</div>
<div id="workSites" class="hide">
<ul class="sites center">
<li class="site"><a class="pointer" href="#">Printfactory</a></li>
<li class="site"><a class="pointer" href="#">Henry's Site</a></li>
</ul>
<button onclick="reset('work')" class="buttonClose pointer" style="z-index: 2;">
Reset
</button>
</div>
</div>
</div>
<div id="page-2" class="page">
<div id="other">
<div id="otherButton" class="category-container center">
<a class="category-button pointer" onclick="openSites('other')">Other</a>
</div>
<div id="otherSites" class="hide">
<ul class="sites center">
<li class="site"><a class="pointer" href="#">#</a></li>
<li class="site"><a class="pointer" href="#">#</a></li>
<li class="site"><a class="pointer" href="#">#</a></li>
</ul>
<button onclick="reset('other')" class="buttonClose pointer" style="z-index: 2;">
Reset2
</button>
</div>
</div>
</div>
</body>
</html>
You are giving a position:absolute tu your reset buttons. This make them take the values of right and bottom relative to next parent with position:relative.In this case being the body tag.
To fix this, add position:relative to your parent divs.
#workSites,
#otherSites {
position: relative;
}
Hope this helps :>
function openSites(categoryType) {
if (categoryType == "work") {
var sites = document.getElementById("workSites");
var button = document.getElementById("workButton");
} else if (categoryType == "other") {
var sites = document.getElementById("otherSites");
var button = document.getElementById("otherButton");
}
sites.classList.add("show");
sites.classList.remove("hide");
button.classList.add("hide");
}
function reset(categoryType) {
if (categoryType == "work") {
var sites = document.getElementById("workSites");
var button = document.getElementById("workButton");
} else if (categoryType == "other") {
var sites = document.getElementById("otherSites");
var button = document.getElementById("otherButton");
}
sites.classList.remove("show");
sites.classList.add("hide");
button.classList.remove("hide");
}
function betterReset() {
for (category in document.getElementsByClassName("category-container")){
document.write(category);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
display: inline-block;
overflow: hidden;
width: 100%;
height: 100vh;
}
#page-1 {
display: block;
background-color: #3faae4;
}
#page-2 {
display: block;
background-color: #ffffff;
}
.pointer {
cursor: pointer;
}
#work {
height: 100%;
width: 100%;
}
#other {
height: 100%;
width: 100%;
}
#workSites {
height: 100%;
width: 100%;
}
#otherSites {
height: 100%;
width: 100%;
}
.sites {
list-style-type: none;
height: 100%;
}
.site {
padding: 50px 0px;
flex-grow: 1;
text-align: center;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
.category-container {
height: 100%;
}
.category-button {
border: solid 0.5px;
padding: 60px;
}
.buttonClose {
position: absolute;
border: solid 0.5px;
border-radius: 5px;
right: 3px;
bottom: 0px;
width: 70px;
height: 35px;
}
.show {
display: block;
}
.hide {
display: none;
}
#workSites,
#otherSites {
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<title>Nick's site</title>
<link rel="stylesheet" type="text/css" href="./styles3.css">
<meta name="viewport" content="width= device-width, inital-scale=1">
</head>
<body>
<div id="page-1" class="page">
<div id="work">
<div id="workButton" class="category-container center">
<a class="category-button pointer" onclick="openSites('work')">Work</a>
</div>
<div id="workSites" class="hide">
<ul class="sites center">
<li class="site"><a class="pointer" href="#">Printfactory</a></li>
<li class="site"><a class="pointer" href="#">Henry's Site</a></li>
</ul>
<button onclick="reset('work')" class="buttonClose pointer" style="z-index: 2;">
Reset
</button>
</div>
</div>
</div>
<div id="page-2" class="page">
<div id="other">
<div id="otherButton" class="category-container center">
<a class="category-button pointer" onclick="openSites('other')">Other</a>
</div>
<div id="otherSites" class="hide">
<ul class="sites center">
<li class="site"><a class="pointer" href="#">#</a></li>
<li class="site"><a class="pointer" href="#">#</a></li>
<li class="site"><a class="pointer" href="#">#</a></li>
</ul>
<button onclick="reset('other')" class="buttonClose pointer" style="z-index: 2;">
Reset2
</button>
</div>
</div>
</div>
</body>
</html>
Related
The sidebar menu below works as expected but there are some elements that I would like to fix and improve.
#1 If you expand the 'System Admin' section the line that is displayed on the left side a in the correct place. However, if you
click on the 'Access Control' the line eon the left side is going
below the horizontal line that's pointing to that section. I tried
fixing that with css 'last-child' method but still is not working
correct. If I change percentage from 50% to 85% then the other
section will have an issue.
#2 I'm looking for a better way to expand/collapse the sections. The function show mimic the existing one, but instead of using the object
with key items I would like to use classes instead if possible.
$( document ).ready(function() {
SIDEBAR_OLD.BASE.ExpandCollapse('Auto');
});
const SIDEBAR_OLD = {};
SIDEBAR_OLD.BASE ={};
SIDEBAR_OLD.BASE.ToggleContent = function(section_id) {
let $sContents = $("#section_" + section_id);
if ( $sContents.css("display") != "none" ) {
$sContents.css("display","none");
} else { // Default to seeing the folder's contents:
$sContents.css("display","");
}
};
$("#main-page-wrapper").on("click", ".toggle-menu", function(e){
e.preventDefault();
let section_id = $(this).attr("data-id");
SIDEBAR_OLD.BASE.ToggleContent(section_id);
});
SIDEBAR_OLD.BASE.ExpandCollapse = function(action) {
let $sContents = null,
sExpand = null,
sRoot = false,
items = {1:"m",2:"sysadmin",5:"access"};
for (key in items) {
$sContents = $("#section_" + items[key]);
switch (action) {
case "Expand":
sExpand = "Yes";
break;
case "Collapse":
sExpand = "No";
break;
default:
if ( !(sExpand = $sContents.attr("data-expand")) ) sExpand = "Yes";
}
// Never close root elements automatically. Only ToggleContent(pNumber), below, can do that.
if ( sRoot = $sContents.attr("data-root") ) { // Note! Assignment! "=", not "=="!
if (sRoot == "Yes") sExpand = "Yes";
}
if ( sExpand == "No" ) {
$sContents.css("display","none");
} else { // Default to seeing the folder's contents:
$sContents.css("display","");
}
}
return true;
};
$("#main-page-wrapper").on("click", ".collapse-menu", function(e){
e.preventDefault();
let action = $(this).attr("data-action");
SIDEBAR_OLD.BASE.ExpandCollapse(action);
});
.sidebar {
position: absolute;
top: 56px;
right: 0px;
bottom: 0px;
left: 0px;
width: 180px;
background-color: #0071bc;
color: #fff;
height: calc(100vh - 98px);
overflow: auto;
font-size: 9pt !important;
white-space: nowrap;
}
.sidebar a {
color: #fff;
}
.menuitem {
color: #fff;
font-weight: bold;
text-decoration: none;
}
.menuitem:hover, .menuitem:focus {
color: #ff0;
}
#tree {
font-weight: bold;
padding: 1px;
}
#expandcollapse {
border: 1px solid white;
text-align: center;
}
.sb-row {
border: 0px;
height: 22px;
margin: 0px;
overflow: hidden;
padding: 0px 0px 0px 3px;
position: relative;
white-space: nowrap;
}
.fa-folder-open:before {
color: #DBDB2A !important;
}
.nav>li {
position: relative;
display: block;
}
.nav>li>a {
position: relative;
display: block;
padding: 7px 22px 6px;
}
.nav>li>a:focus {
text-decoration: none;
background: transparent;
background-color: transparent;
}
.nav > li > a:hover {
color: red;
background-color: transparent;
text-decoration: none;
}
.nav.side-menu>li {
position: relative;
display: block;
cursor: pointer;
}
.nav.child_menu li {
padding-left: 20px;
}
.nav.child_menu>li>a {
font-weight: 500;
font-size: 12px;
font-weight: bold;
}
li.first-level::before {
background: #fff;
bottom: auto;
content: "";
height: 1px;
left: 10px;
margin-top: 14px;
position: absolute;
right: auto;
width: 8px;
}
li.first-level::after {
border-left: 1px solid #fff;
bottom: 0;
content: "";
left: 10px;
position: absolute;
top: 0;
}
ul.nav.side-menu li.first-level:last-child::after {
bottom: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<div class="container body" id="main-page-wrapper">
<div class="sidebar">
<div id="tree" role="navigation" data-expandall="Auto">
<div id="expandcollapse">
<a class="menuitem collapse-menu pr-2" href="#" data-action="Expand">Expand</a> | <a class="menuitem collapse-menu pl-2" href="#" data-action="Collapse">Collapse</a>
</div>
<div class="sb-row">
<a class="toggle-menu" title="Open/Close Folder - System Management" data-id="m">
<i class="fa fa-folder-open fa-lg"></i> System Management
</a>
</div>
<div id="section_m" class="menu-section" data-root="Yes" data-expand="Yes">
<ul class="nav side-menu">
<li class="first-level">
<a class="toggle-menu" href="#" title="System Admin" data-id="sysadmin"><i class="fa fa-folder-open"></i> System Admin</a>
<ul class="nav child_menu first" id="section_sysadmin" data-expand="No">
<li><a class="link-item" data-action="param" title="System Parameters">System Parameters</a></li>
<li><a class="link-item" data-action="schema" title="Select Schema">Select Schema</a></li>
<li><a class="link-item" data-action="item" title="Menu Item">Menu Items</a></li>
</ul>
</li>
<li class="first-level">
<a class="toggle-menu" href="#" title="Access Control" data-id="access"><i class="fa fa-folder-open"></i> Access Control</a>
<ul class="nav child_menu first" id="section_access" data-expand="No">
<li><a class="link-item" data-action="user" title="Manage User">Manage User</a></li>
<li><a class="link-item" data-action="role" title="Manage Role">Manage Role</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
As the title states, I am wanting my hamburger navbar to close when I click on the tags I have tried many ways for the last couple hours but am unable to solve my problem?
I Have tried setting the hide() property with jquery but no luck think it may be because i am pretty new to JS and am just wanting to get my website finished.
const menuBtn = document.querySelector(".menu-btn");
const mobileContent = document.querySelector(".mobile-content");
const mobileItem = document.querySelector(".mobile-item");
const mobileItems = document.querySelectorAll(".mobile-items");
// Set Initial State Of Menu
let showMenu = false;
menuBtn.addEventListener("click", toggleMenu);
function toggleMenu() {
if (!showMenu) {
menuBtn.classList.add("close");
mobileContent.classList.add("show");
mobileItem.classList.add("show");
mobileItems.forEach(item => item.classList.add("show"));
// Set Menu State
showMenu = true;
} else {
menuBtn.classList.remove("close");
mobileContent.classList.remove("show");
mobileItem.classList.remove("show");
mobileItems.forEach(item => item.classList.remove("show"));
// Set Menu State
showMenu = false;
}
}
.mobile-nav {
display: block;
position: fixed;
width: 100%;
top: 0;
z-index: 3;
}
.mobile-nav .menu-btn {
position: absolute;
z-index: 3;
right: 20px;
top: 20px;
cursor: pointer;
}
.mobile-nav .menu-btn .btn-line {
width: 28px;
height: 3px;
margin: 0 0 5px 0;
background: #333;
}
.mobile-content {
position: fixed;
top: 0;
width: 100%;
opacity: 0.9;
visibility: hidden;
}
.mobile-content.show {
visibility: visible;
}
.mobile-content .mobile-item {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
float: right;
width: 100%;
height: 100vh;
overflow: hidden;
margin: 0;
padding: 0;
background: blue;
list-style: none;
transform: translate3d(0, -100%, 0);
}
.mobile-content .mobile-link {
display: inline-block;
position: relative;
font-size: 2rem;
padding: 1rem 0;
font-weight: bold;
color: #333;
text-decoration: none;
}
<!-- Mobile Nav -->
<div class="mobile-nav">
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<h2>MATTY</h2>
<nav class="mobile-content">
<ul class="mobile-item">
<li class="mobile-items">
<a href="#about-me" class="mobile-link">
ABOUT
</a>
</li>
<li class="mobile-items">
<a href="#the-portfolio" class="mobile-link">
PORTFOLIO
</a>
</li>
<li class="mobile-items">
<a href="#" class="mobile-link">
BLOG
</a>
</li>
<li class="mobile-items">
<a href="#contact-me" class="mobile-link">
CONTACT
</a>
</li>
</ul>
</nav>
</div>
I had to remove some of your CSS as it was not working in the snippet.
Recommend you use element.classList.toggle() as below.
Note how much simpler the code becomes.
EDIT: Clicking any a tag will now close menu
document.addEventListener("click", (e) => {
if(e.target.matches('.menu-btn')
|| e.target.matches('.btn-line')
|| e.target.matches('a')) {
toggleMenu();
}
});
function toggleMenu() {
document.querySelector('.mobile-content').classList.toggle('hide');
}
.btn-line {
display: block;
width: 50px;
margin: 5px;
border: 2px solid black;
}
.mobile-nav {
display: block;
width: 100%;
z-index: 3;
}
.mobile-content {
position: fixed;
width: 100%;
opacity: 0.9;
}
.hide {
display: none;
}
<!-- Mobile Nav -->
<div class="mobile-nav">
<div class="menu-btn">
<span class="btn-line"></span>
<span class="btn-line"></span>
<span class="btn-line"></span>
</div>
<a href="#home">
<h2>MATTY</h2>
</a>
<nav class="mobile-content hide">
<ul class="mobile-item">
<li class="mobile-items">
<a href="#about-me" class="mobile-link">
ABOUT
</a>
</li>
<li class="mobile-items">
<a href="#the-portfolio" class="mobile-link">
PORTFOLIO
</a>
</li>
<li class="mobile-items">
<a href="#" class="mobile-link">
BLOG
</a>
</li>
<li class="mobile-items">
<a href="#contact-me" class="mobile-link">
CONTACT
</a>
</li>
</ul>
</nav>
</div>
#MPB A good way to dabble into some simple JQuery language is a way to fix your problem. A quick and easy way to make a good Hamburger Navigation menue is with the toggleClass(); function in JQuery. Just make a #keyframes-animation within an un-set class and toggleClass(); will switch between the two seamlessly. I do this all the time, comment if you'd like me to forward the code to you for you to use.
Here is a link to my CodePen Project
If you preview the index.html page and hover over the white space within a <tr>, the edit and delete tools appear as expected. However, if you hover over the text within a <td>, the mouseout event is triggered.
Here is the relevant code:
index.js
var tableBody = $('#tableBody');
$(document).ready(() => {
updateTable();
tableBody.on('mouseover', 'td', displayTools).on('mouseout', 'td', hideTools);
});
// async function getRecords(){
// }
function updateTable(){
prodData.forEach(record => {
tableBody.append(`<tr>
<td>
<div class="icons">
<i class="icon edit"></i>
<i class="icon trash"></i>
</div>
<div class="record-details" onmouseover="displayTools(this)">
<div class="item-name">${record.name}</div>
<div class="item-type">${record.type}</div>
</div>
</td>
<td>Active</td>
</tr>`);
});
}
function displayTools(e){
var iconDiv = $($(e.target).children()[0]);
if(!iconDiv.hasClass('visible')){
iconDiv.addClass('visible');
}
}
function hideTools(e){
var iconDiv = $($(e.target).children()[0]);
iconDiv.removeClass('visible');
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Sentinel Project</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<div class="nav-bar">
<div class="nav-item">Home</div>
<div class="nav-item">Statistics</div>
<div class="nav-item">Contact</div>
</div>
<div class="splash"></div>
<div class="container">
<div class="content">
<div class="cps-bar">
<div class="cps-item active">Producers</div>
<div class="cps-item">Consumers</div>
<div class="cps-item">Statistics</div>
</div>
<div class="content-body">
<table class="ui basic celled table">
<thead>
<tr>
<th class="fifteen wide">Producer</th>
<th class="one wide">Status</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scripts/producerData.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
index.scss
#import url('https://fonts.googleapis.com/css?family=Raleway:100,400,700,900');
#import url('https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css');
body{
margin: 0;
font-family: 'Raleway', sans-serif;
}
.splash {
position: relative;
width: 100vw;
height: 100vh;
background-image: url("https://images.unsplash.com/photo-1506371466305-dbad31f2b998?ixlib=rb-0.3.5&s=b09238e202f7a227a0f5376c4154dd2c&auto=format&fit=crop&w=2850&q=80");
background-size: cover;
background-position: center;
filter: grayscale(80%) opacity(80%);
}
.nav-bar {
display: flex;
justify-content: space-around;
height: 52px;
align-items: center;
}
.container {
position: absolute;
width: 100vw;
top: 0;
}
.content {
display: flex;
flex-direction: column;
width: 90vw;
margin: 0 auto;
transform: translateY(120px);
background-color: white;
border-radius: 2px;
}
.cps-bar {
display: flex;
justify-content: space-around;
}
.cps-item {
font-weight: 400;
padding: 12px 0;
}
.cps-item.active {
font-weight: 700;
}
.table {
width: 96% !important;
margin: 0 auto !important;
}
.icons {
float: left;
width: 0px;
margin: auto;
visibility: hidden;
opacity: 0;
transition: width 0.2s, opacity 0.1s 120ms;
}
.record-details {
float: left;
}
.visible {
visibility: visible;
width: 50px;
opacity: 1;
}
Is this a propagation issue? Also, I'm sure there is a much more elegant solution than what I'm attempting.
Thank you very much. I hope this question is formatted correctly.
Matthew
I am building a simple website for a client, they have two studios and they would like to display them on googleMaps in the contact section. Problem is, I cannot display two maps at once. So I would like to make it so that when you click on one address it hides a map and displays the other and vice-versa. Here is the code:
function showMapOne() {
document.getElementById("mapOne").style.display = "block";
document.getElementById("mapTwo").style.display = "none";
}
function showMapTwo() {
document.getElementById("mapOne").style.display = "none";
document.getElementById("mapTwo").style.display = "block";
}
#addressOne {
padding-left: 20px;
font-family: "arial";
}
#mapOne {
display: block;
position: absolute;
width: 1050px;
height: 500px;
}
#addressTwo {
position: relative;
padding-left: 20px;
padding-top: 500px;
font-family: "arial";
}
#mapTwo {
display: none;
position: relative;
width: 1050px;
height: 500px;
}
<div id="addressOne">
Via G. Mattei, 114 - Arese - MI
</div>
<div id="addressTwo">
Via Miralago, 12 - Laveno Mombello - VA
</div>
<div id="mapDivOne">
<div id="mapOne"></div>
</div>
<div id="mapDivTwo">
<div id="mapTwo"></div>
</div>
You are missing the () in the function call onClick="showMapOne()" and onClick="showMapTwo()"
Perhaps you mean this?
window.onload=function() {
document.getElementById("address_One").onclick=document.getElementById("address_Two").onclick=function() {
var id = this.id.split("_")[1];
document.getElementById("mapOne").style.display = id=="One"?"block":"none";
document.getElementById("mapTwo").style.display = id=="Two"?"block":"none";
}
}
#addressOne {
padding-left: 20px;
font-family: "arial";
}
#mapOne {
display: block;
position: absolute;
width: 1050px;
height: 500px;
}
#addressTwo {
position: relative;
padding-left: 20px;
padding-top: 500px;
font-family: "arial";
}
#mapTwo {
display: none;
position: relative;
width: 1050px;
height: 500px;
}
<div>
<a id="address_One" href="#">Via G. Mattei, 114 - Arese - MI</a>
</div>
<div id="mapOne">Map 1</div>
<div id="addressTwo">
<a href="#" id="address_Two" >Via Miralago, 12 - Laveno Mombello - VA</a>
</div>
<div id="mapTwo">Map 2</div>
I have reference image attach for description.As in figure it is having two section side by side.One is for image(mobile and tablet) and second is for is features.This whole section is below the fold.
Now when user scrolls to view it and when image reaches vertically middle of the viewport its position should remain fixed.While its position is fixed features should scroll as normally.As one feature goes out of viewport image should change. When all features are out of viewport, position of image should again become static.
I am using skrollr js plugin for this.Please help...
Here is the code
.featurenav {
margin: 0px;
padding: 0px;
list-style: none;
}
.featurenav li:before {
content: url('../images/point.png');
position: absolute;
left: 0px;
top: 5px
}
.featurenav li {
font-family: OpenSans-Light;
color: #838b80;
font-size: 30px;
margin-bottom: 90px;
padding-left: 83px;
position: relative;
}
.color {
float: left;
width: 74px;
height: 74px;
margin: 30px 25px 0px 0px;
border-radius: 5px;
}
.color1 {
background-color: #c9bda3;
}
.color2 {
background-color: #c99a32;
}
.color3 {
background-color: #838b80;
}
.color4 {
background-color: #fff;
}
.showcase img {
width: 100%;
}
.showcase img:not(:first-child) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 padding-zero">
<div class="col-sm-6">
<ul class="featurenav">
<li class="firstli">Graphical Layout</li>
<li class="secondli">Open sans Font Used</li>
<li class="thirdli">Colors Used
<br>
<div class="color color1"></div>
<div class="color color2"></div>
<div class="color color3"></div>
<div class="color color4"></div>
<div class="clearfix"></div>
</li>
<li class="fourthli">Parallax Smooth Scrolling</li>
<li class="fifthli">Adaptable</li>
</ul>
</div>
<div class="col-sm-6 showcase">
<img src="images/mobile_tablet.png" data-bottom-top="display:block" alt="showcase" data-anchor-target=".firstli" />
<img src="images/mobile_tablet_2.png" alt="showcase" />
<img src="images/mobile_tablet_3.png" alt="showcase" />
<img src="images/mobile_tablet_4.png" alt="showcase" />
<img src="images/mobile_tablet_5.png" alt="showcase" />
</div>
<div class="clearfix"></div>
</div>
Your images aren't working, so here's a generic solution. All you have to do is change the element to position: fixed; when you scroll to wherever the image is minus half the browser viewport height
$(window).on('load', function() {
$affix = $('#affix');
$affix.attr('data-affix', $affix.offset().top);
}).on('scroll', function() {
var scrolled = $(window).scrollTop(),
vh = $(window).height(),
halfView = (vh / 2),
scrollPoint = $affix.attr('data-affix') - halfView;
if (scrolled >= scrollPoint) {
$('img').addClass('fixed');
} else {
$('img').removeClass('fixed');
}
});
* {margin:0;}
section {
height: 500vh;
}
img {
max-width: 600px;
width: 100%;
}
.fixed {
position: fixed;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section></section>
<section><img id="affix" src="http://plusquotes.com/images/quotes-img/cool_cat.jpg" data-affix></section>