We Keep Coding

Hiding other toggles when a modal is activated

I have two modals, left and right, each drop down when clicked and want to have only one toggle appear as an on/off when activated.
Right now, both toggles appear when either modal is on. When the LEFT toggle is on and the modal drops down I want to hide the RIGHT toggle button and modal (and vice versa).
// common close button
$('.toggle').click(function() {
$(this).closest(".modal").toggleClass('modal-visible');
});
// explicit button per modal
$('.toggle').on('click', function(e) {
var modalid = $(this).data("modal-id");
$(`.modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});
.modal {
position: fixed;
z-index: 10000;
/* 1 */
top: 0;
left: 0;
visibility: hidden;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.modal.modal-visible {
visibility: visible;
}
.modal-overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 0%;
background: #fff;
visibility: hidden;
opacity: 0;
transition: visibility 0s height 0.5s;
box-sizing: border-box;
}
.modal.modal-visible .modal-overlay {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.modal-wrapper {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-left: 0;
background-color: #fff;
box-sizing: border-box;
}
.modal-transition {
transition: all 0.5s;
transform: translateY(-100%);
opacity: 1;
}
.modal.modal-visible .modal-transition {
transform: translateY(0);
opacity: 1;
}
.modal-header,
.modal-content {
padding: 1em;
}
.modal-header {
position: relative;
top: 10%;
background-color: #fff;
}
.modal-close {
position: fixed;
top: 0;
right: 0;
padding: 1em;
color: #aaa;
background: none;
border: 0;
font-size: 18px;
}
.modal-close:hover {
color: #777;
}
.modal-heading {
font-size: 1.125em;
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.modal-content>*:first-child {
margin-top: 0;
}
.modal-content>*:last-child {
margin-bottom: 0;
}
.modal.modal-scroll .modal-content {
max-height: 100%;
overflow-y: scroll;
}
.modal.modal-scroll .modal-wrapper {
position: absolute;
z-index: 9999;
top: 2em;
left: 50%;
width: 32em;
margin-left: -16em;
background-color: #CDf;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
}
button {
background: transparent;
font-family: 'Republique', sans-serif;
font-variant: normal;
font-weight: 400;
font-size: 24px;
line-height: 0.5;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
letter-spacing: .4px;
color: #000;
cursor: pointer;
outline: 0;
border: 0;
padding: 4px;
}
#righty {
position: fixed;
right: 10px;
top: 10px;
z-index: 100000;
}
#lefty {
position: fixed;
left: 10px;
top: 10px;
z-index: 100000;
}
body {
background: pink;
}
button {
color: white;
}
button:hover {
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggle" data-modal-id="lefty" id="lefty">LEFT</button>
<button class="toggle" data-modal-id="righty" id="righty">RIGHT</button>
<div class="modal" data-modal-id="lefty">
<div class="modal-overlay toggle"></div>
<div class="modal-wrapper modal-transition">
<div class="modal-header">
<button class="modal-close toggle"></button>
<h2 class="modal-heading">This is a modal on the left</h2>
</div>
<div class="modal-body">
<div class="modal-content">
</div>
</div>
</div>
</div>
<div class="modal" data-modal-id="righty">
<div class="modal-overlay toggle"></div>
<div class="modal-wrapper modal-transition">
<div class="modal-header">
<h2 class="modal-heading">This is a modal on the right</h2>
</div>
<div class="modal-body">
<div class="modal-content">
</div>
</div>
</div>
</div>
I tried various routes in CSS (nested divs, display:none, etc.) and struggling to find a solution. My javascript knowledge is very rudimentary, so perhaps there is a path there?

I added 4 lines in your JS:
We will declare 2 variables, one that will take the button's id (and therefore the modal id as well), and the other one, the id of the current visible modal.
We will then check if the two id are not matching, if it is true (meaning the id aren't the same) then we hide the visible modal by removing its class modal-visible.
If the two id are the same then we skip this step.
Lastly, we will toggle the modal with the button's id, it will either close it or open it.
That's all.
// common close button
$('.toggle').click(function() {
$(this).closest(".modal").toggleClass('modal-visible');
});
// explicit button per modal
$('.toggle').on('click', function(e) {
var modalid = $(this).data("modal-id");
var visible = $('.modal-visible').data("modal-id");
//check if the IDs are not the same
if (visible != modalid) {
$('.modal-visible').removeClass('modal-visible');
}
$(`.modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});

When mySwitch is untoggled/unchecked, the toggle/checked no longer works, doesn't change my background again

I have 2 toggle switches, the problem I have is sperating each toggle switches to do their own thing. I'm unable to, in javascript, to make a if/else statement for my 2nd toggle switch.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Asignment 3</title>
<link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/136/136724.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="RainbowId">
<div id="mySidebar" class="sidebar">
<a class="closebtn" onclick="closeNav()">×</a>
<a>RAINBOW MODE</a>
<a><label class="switch"><input type="checkbox"><div class="slider round"><div id="text">OFF</div></div></label></a>
<a><br></a>
<a><br></a>
<a>DO NOT TOUCH</a>
<a><label class="switch2"><input type="checkbox2"><div class="slider2 round2"><div id="text2">OFF</div></div></label></a>
</div>
<button class="openbtn" id="openBtnId" onclick="openNav()">⚙️</button>
</div>
</body>
</html>
the first if statement for the frist switch works but when I copy the code i couldn't make an ID for the CHECKBOX for javascript and CSS.
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
}
document.addEventListener('DOMContentLoaded', function () {
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function () {
if (checkbox.checked) {
RainbowId.classList.toggle('Rainbow');
document.getElementById('text').innerHTML = 'ON';
}
else {
RainbowId.classList.toggle("Rainbow");
document.getElementById('text').innerHTML = 'OFF';
}
});
});
I gave the 2nd switch its own classes but couldn't give the CHECKBOX its own class.
/* Rainbow background*/
.Rainbow {
height: 100%;
width: 100%;
left:0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(#ff0000, #ff4000, #ff8000, #ffbf00, #ffff00, #bfff00, #80ff00, #40ff00, #00ff00, #00ff40, #00ff80, #00ffbf, #00ffff, #00bfff, #0080ff, #0040ff, #0000ff, #4000ff, #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040, #ff0000);
position: absolute;
background-size: 1800% 1800%;
-webkit-animation: rainbow 3s ease infinite;
animation: rainbow 3s ease infinite;
}
#keyFrames rainbow {
0%{background-position:0% 82%}
25%{background-position: 50% 9.5%}
50%{background-position:100% 19%}
75%{background-position: 75% 41%}
100%{background-position:0% 82%}
}
/* Sidebar Styles */
.sidebar {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
background: grey;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
overflow-x: hidden;
transition: 1s;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
white-space: nowrap;
transition: 0.3s;
}
.closebtn {
cursor: pointer;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 40px;
}
.openbtn {
font-size: 40px;
cursor: pointer;
border: none;
background: none;
}
.openbtn:hover {
opacity: 50%;
}
br {
user-select: none;
}
/* Toggle Switch Styles */
.switch {
position: absolute;
width: 60px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
.switch input {
display:none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.switch #text {
user-select: none;
position: absolute;
left: 60px;
margin-left: 10px;
}
/*Toogle Switch 2*/
.switch2 {
position: absolute;
width: 60px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
.switch2 input {
display:none;
}
.slider2 {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider2:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider2 {
background-color: #2196F3;
}
input:focus + .slider2 {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider2:before {
transform: translateX(26px);
}
.slider2.round2 {
border-radius: 34px;
}
.slider2.round2:before {
border-radius: 50%;
}
.switch2 #text2 {
user-select: none;
position: absolute;
left: 60px;
margin-left: 10px;
}

Change your code as follows - use querySelectorAll to find all .checkbox
You'll see that both id="text" (and text2) are now class="text" this is important, since we can get the parent of the clicked checkbox and use querySelector to find the appropriate text
document.addEventListener('DOMContentLoaded', function() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
checkbox.parentElement.querySelector('.text').innerHTML =
checkbox.checked ? 'ON' : 'OFF';
if (this.dataset.action === 'rainbow') {
RainbowId.classList.toggle('Rainbow');
} else {
console.log('DO NOT TOUCH as TOUCHED');
}
});
});
});
I also tidied the code a bit to be more DRY
And your html - I've put line breaks in to make it readable, but I know that may cause issues, but at least you can see easily what has changed
<div id="RainbowId">
<div id="mySidebar" class="sidebar">
<a class="closebtn" onclick="closeNav()">×</a>
<a>RAINBOW MODE</a>
<a>
<label class="switch">
<input type="checkbox" data-action="rainbow">
<div class="slider round">
<!-- added class here -->
<div id="text" class="text">OFF</div>
</div>
</label>
</a>
<a><br></a>
<a><br></a>
<a>DO NOT TOUCH</a>
<a>
<label class="switch2">
<input type="checkbox" data-action="not a rainbow">
<div class="slider2 round2">
<!-- added class here -->
<div id="text2" class="text">OFF</div>
</div>
</label>
</a>
</div>
<button class="openbtn" id="openBtnId" onclick="openNav()">⚙️</button>
</div>

How to make an element spin with js and css transitions without variables

I have a website, and I want an element to spin around 360 degrees once when it is clicked. The only way I have heard of to rotate a div element is the CSS transform property. I have tried some different things, like
backward.classList.add("notrans");
backward.style.transform = "rotateZ(0deg)";
backward.classList.remove("notrans");
backward.style.transform = "rotateZ(-360deg)";
where the notrans class makes the element have a transition time of 0 seconds, and
backward.style.transition = "0s";
backward.style.transform = "rotateZ(0deg)";
backward.style.transition = transtime;
backward.style.transform = "rotateZ(360deg)";
Here is the source code I am using right now:
var backward = document.getElementById("backward");
var Backward = function() {bgm.currentTime -= 10;
backward.classList.add("notrans");
backward.style.transform = "rotateZ(0deg)";
backward.classList.remove("notrans");
backward.style.transform = "rotateZ(-360deg)";
}
:root {
--color: black;
--hovercolor: white;
--backcolor: white;
--hoverbackcolor: black;
--transtime: 0.5s;
}
#controls {
position: absolute;
left: 0;
top: 45%;
width: 100%;
height: 30%;
font-size: 250%;
border: 1px solid var(--color);
border-radius: 20px;
overflow: hidden;
padding: 0;
background-color: var(--color);
}
.cp {
height: 25%;
width: 0;
overflow: hidden;
background-color: black;
}
.controls {
position: absolute;
top: 0;
width: 25%;
height: 100%;
border: 1px solid var(--color);
background-color: var(--backcolor);
color: var(--color);
line-height: 75%;
transform: rotateZ(0deg);
border-radius: 0;
transition: color var(--transtime), background-color var(--transtime);
text-align: center;
padding: 5%;
}
.controls:hover {
background-color: var(--hoverbackcolor);
color: var(--hovercolor);
}
#pause {
left: 25%;
line-height: 100%;
}
#backward {
left: 0;
line-height: 100%;
}
#autoskip {
right: 0;
}
#forward {
right: 25%;
line-height: 100%;
}
#autoskip {
line-height: 150%;
}
#skipline {
position: absolute;
left: 0;
top: 47.5%;
background-color: red;
height: 5%;
width: 100%;
transform: rotateZ(-45deg);
transition: var(--transtime);
}
<!DOCTYPE html>
<html>
<body>
<div id="controls">
<div id="15" class="cp">
<div id="backward" class="controls"><span class="rot"><span class = "button">↺</span></span>
</div>
</div>
<div id="22" class="cp">
<div id="pause" class="controls"><span class="button">| |</span></span>
</div>
</div>
<div id="33" class="cp">
<div id="forward" class="controls"><span class="rot"><span class = "button">↻</span></span>
</div>
</div>
<div id="44" class="cp">
<div id="autoskip" class="controls"><span class="button">⏩</span>
<div id="skipline"></div>
</div>
</div>
</div>
</body>
</html>
As you can see, the Backward button is not spinning when you press it.
Any help?
FYI: There is a lot of extra stuff in the code snippet, like CSS variables, but those are necessary.

Do you want this behaviour?
var spinner = document.querySelector("#spinner");
document.querySelector("button").onclick = function() {
spinner.style.animationName = "example";
setTimeout(function() {
spinner.style.animationName = "";
}, 4000);
};
#spinner {
width: 100px;
height: 100px;
display: flex;
flex-wrap: wrap;
background-color: red;
border-radius: 50%;
overflow: hidden;
animation-duration: 4s;
position: relative;
justify-content: center;
align-items: center;
}
#spinner div {
width: 50%;
height: 50%;
}
#spinner button {
position: absolute;
cursor: pointer;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
#keyframes example {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
<div id="spinner">
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="yellow"></div>
<button>Spin</button>
</div>

Click back arrow not working properly in JavaScript

This is my html and JavaScript code I want help in this task, After I go back and forth into the submenus several times, the padding gets messed up for the elements and the icons get cut off.
Some times it work properly but when I click back arrow very quickly Its messed the paddings.
I am sharing screenshot also.
$(document).ready(function() {
// Variable declaration...
var left, width, newLeft;
// Add the "top-menu" class to the top level ul...
$('.mobile-menu').children('ul').addClass('top-menu');
// Add buttons to items that have submenus...
$('.has_child_menu').append('<button class="arrow"><i class="fa fa-chevron-right"></i></button>');
// Mobile menu toggle functionality
$('.menu-toggle').on('click', function() {
// Detect whether the mobile menu is being displayed...
display = $('.mobile-menu').css("display");
if (display === 'none') {
// Display the menu...
$('.mobile-menu').css("display", "block");
} else {
// Hide the mobile menu...
$('.mobile-menu').css("display", "none");
// and reset the mobile menu...
$('.current-menu').removeClass('current-menu');
$('.top-menu').css("left", "0");
$('.back-button').css("display", "none");
}
});
// Functionality to reveal the submenus...
$('.arrow').on('click', function() {
// The .current-menu will no longer be current, so remove that class...
$('.current-menu').removeClass('current-menu');
// Turn on the display property of the child menu
$(this).siblings('ul').css("display", "block").addClass('current-menu');
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left - width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Also display the "back button" (if it is hidden)...
if ($('.back-button').css("display") === "none") {
$('.back-button').css("display", "flex");
}
});
// Functionality to return to parent menus...
$('.back-button').on('click', function() {
// Hide the back button (if the current menu is the top menu)...
if ($('.current-menu').parent().parent().hasClass('top-menu')) {
$('.back-button').css("display", "none");
}
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left + width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Allow 0.25 seconds for the css transition to finish...
window.setTimeout(function() {
// Hide the out-going .current-menu...
$('.current-menu').css("display", "none");
// Add the .current-menu to the new current menu...
$('.current-menu').parent().parent().addClass('current-menu');
// Remove the .current-menu class from the out-going submenu...
$('.current-menu .current-menu').removeClass('current-menu');
}, 250);
});
});
body {
margin: 0px;
padding: 0px;
font-family: 'Segoe UI';
}
.smart-list-container {
max-width: 95%;
margin: 10px auto;
}
.smart-list-header {
background: #265a88;
padding: 10px 0px;
}
.current-page-title {
text-align: center;
}
.current-page-title h3 {
color: #fff;
margin: 0px;
}
.smart-row {}
.smart-list-icon {
float: left;
width: 60px;
}
.smart-list-icon .fa {
font-size: 35px;
padding-right: 20px;
}
.smart-descrption {
float: right;
width: calc(100% - 60px);
}
.smart-text {
float: left;
}
.smart-text h3 {
margin: 0;
}
.smart-right-btn {
float: right;
}
.smart-right-btn .fa {
font-size: 28px;
}
.sub-list {
display: none;
}
.slide-smart-page {
left: -100%;
position: absolute;
transition: 0.5s all ease;
}
body .slide-smart-sub-page {
display: block;
}
.sub-list {
background: #2196F3;
height: 300px;
}
/*******switch-btn*******/
.smart-right-btn .switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-bottom: 0px;
}
.smart-right-btn .switch input {
display: none;
}
.smart-right-btn .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn input:checked+.slider {
background-color: #2196F3;
}
.smart-right-btn input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
.smart-right-btn input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.smart-right-btn .slider.round {
border-radius: 34px;
}
.smart-right-btn .slider.round:before {
border-radius: 50%;
}
/*******switch-btn-end*******/
.smart-list-container .mobile {
background: #fff;
overflow: hidden;
/* NB: Remove this overflow property if you want to get a better idea of what is happening "under the hood" */
position: relative;
}
.smart-list-container .mobile-controls {
background: #337ab7;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: 10px;
}
.smart-list-container .mobile-controls button {
background: none;
border: none;
border-radius: 8px;
color: #fff;
height: 40px;
padding: 0 15px;
outline: none;
font-size: 18px;
}
.smart-list-container button:hover {
cursor: pointer;
}
.smart-list-container .mobile-controls .back-button {
display: none;
}
.smart-list-container .mobile-menu {
background: #fff;
display: none;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 10;
}
.smart-list-container ul {
margin: 0;
padding: 0;
width: 100%;
position: absolute;
transition: 0.25s;
}
.smart-list-container li {
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
list-style: none;
}
.smart-list-container li a {
color: #000;
flex: 3;
padding: 10px 10px;
text-decoration: none;
}
.smart-list-container li button {
background: none;
border: 0;
flex: 1;
text-align: right;
padding: 10px;
}
.smart-list-container div>ul {
top: 0;
left: 0;
}
.smart-list-container div>ul ul {
display: none;
top: 0;
left: 100%;
}
/* Content styles below here */
.smart-list-container section {
line-height: 1.5;
padding: 20px;
}
.smart-list-container h1 {
font-size: 1.5rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smart-list-container">
<div class="mobile">
<div class="mobile-controls">
<button class="menu-toggle">Page Name</button>
<button class="back-button"><i class="fa fa-chevron-left"></i></button>
</div>
<div class="mobile-menu">
<ul>
<li>
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="smart-right-btn">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
</li>
<li class="has_child_menu">
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
<ul>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<section>
<article>
<h1>Mobile menu demo</h1>
<p>Click the button above to see the mobile menu in action!</p>
<p>The menu functionality was inspired by the Settings app in iOS.</p>
<p>This implementation uses some jQuery and flexbox. The orginal code was written for a WordPress theme, so absolute positioning was used (rather than fixed positioning - which is easier) to avoid conflicts with the admin bar (when the user is logged-in).</p>
</article>
</section>
</div>
</div>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Do transition: 0.15s; instead of transition: 0.25s; in css file.

What is making my navigation bar sticking on top while scrolling?

I am wondering what is making my nav bar sticking to the top while scrolling since I have just basic html and css code? Last time I was not able to do so without javascript. Thanks in advance
Here is JSFiddle link: https://jsfiddle.net/tw03egpc/
body {
background-color: black;
}
#heder {
background-color: blue;
color: aqua;
}
#wrap {
z-index: 1;
margin: 0;
padding: 0;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#navWrap {
height: 30px;
opacity: 0.7;
filter: alpha(opacity=80);
}
#nav {
height: 95px;
padding: 5px;
background: #999;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
float: left;
padding: 3px 8px;
background-color: grey opacity: 0.5;
margin: 0;
color: #f00;
list-style-type: none;
}
#nav li a {
color: black;
text-decoration: none;
margin: 10 px;
-webkit-transition: 0.2s 0.2s;
}
#nav li a:hover {
color: red;
}
br.clearLeft {
clear: : left;
}
#positionli {
position: absolute;
top: 70px;
left: 10pX;
}
.image {
width: 1000px;
height: 725px;
opacity: 0.3;
filter: alpha(opacity=30);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: ass 1s ease;
transition: : ass 1s ease;
}
.image:hover {
width: 1100px;
height: 800px;
opacity: 0.9;
filter: alpha(opacity=100);
}
.imageframe {
border: 3px solid #fff;
width: 1000px;
height: 725px;
margin: 0px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
#positionimage {
position: absolute;
top: 108px;
left: 2;
}
#div {
width: 580;
height: 678;
overflow: scroll;
border: 1px solid white;
padding: 25;
margin: 25px;
position: absolute;
right: 100px;
top: 84px;
left: 988px;
}
.p {
color: white;
}
#h1 {
color: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: 837;
}
p {
width: 700px;
color: aliceblue;
padding: 20px;
margin: 10px;
position: absolute;
top: 1100px;
}
#h11 {
color: white;
position: relative;
top: 1070;
margin: 10px;
}
<body>
<div id="wrap">
<div id="header">
<div id="navWrap">
<div id="nav">
<div id="positionli">
<ul>
<li> Demo Link 1</li>
<li> Demo Link 2</li>
<li> Demo Link 3</li>
<li> Demo Link 4</li>
</ul>
</div>
<br class="clearLeft" />
</div>
</div>
</div>
</div>
<div id="positionimage">
<div class="imageframe">
<img class="image" src="https://www.qdtricks.net/wp-content/uploads/2016/05/hd-road-wallpaper.jpg">
</div>
</div>
<div id="div">
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fposts%2F1250296021672270&width=500" width="500" height="475" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fvideos%2F1266500823385123%2F&show_text=0&width=400" width="500" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"
allowFullScreen="true"></iframe>
</div>
<!-- <h1> _____Videos_____ </h1>-->
<!-- <h1 id="h11"> About us </h1> -->
<p> Infinitiv je troclani sastav nastao u Pozarevcu krajem 2010. koji danas radi i stvara u Beogradu. 2012. su izdali svoj prvi EP pod nazivom ,,Deep inside''. Posle dosta svirki sirom Srbije i ucesca na festivalima i takmicenjima(BDFL 2013, Majska gitarijada
2012), bend krajem 2013. objavljuje svoj prvi album ''U beskraj'', sa opcijom free download-a preko Nocturne magazine-a. Nakon toga, bend zapocinje koncertnu promociju pesama sa prvog albuma, kao i izradu i promociju pesama koje ce se naci na drugom
albumu cije je objavljivanje planirano za 2017 godinu. U julu 2016. bend osvaja prvo mesto na Kursumlijskoj gitarijadi
</p>
<br/>
</body>

Your nav bar is sticking to the top because of position: fixed defined in #wrap.
position: fixed will fix the element and it's children to the specified position.
To know more about HTML positioning.
https://developer.mozilla.org/en/docs/Web/CSS/position
https://www.w3schools.com/cssref/pr_class_position.asp (Check the Play It ›› )
body {
background-color: black;
}
#heder {
background-color: blue;
color: aqua;
}
#wrap {
z-index: 1;
margin: 0;
padding: 0;
/* comment below line "position: fixed;" to get the default behaviour */
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#navWrap {
height: 30px;
opacity: 0.7;
filter: alpha(opacity=80);
}
#nav {
height: 95px;
padding: 5px;
background: #999;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
float: left;
padding: 3px 8px;
background-color: grey opacity: 0.5;
margin: 0;
color: #f00;
list-style-type: none;
}
#nav li a {
color: black;
text-decoration: none;
margin: 10 px;
-webkit-transition: 0.2s 0.2s;
}
#nav li a:hover {
color: red;
}
br.clearLeft {
clear: : left;
}
#positionli {
position: absolute;
top: 70px;
left: 10pX;
}
.image {
width: 1000px;
height: 725px;
opacity: 0.3;
filter: alpha(opacity=30);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: ass 1s ease;
transition: : ass 1s ease;
}
.image:hover {
width: 1100px;
height: 800px;
opacity: 0.9;
filter: alpha(opacity=100);
}
.imageframe {
border: 3px solid #fff;
width: 1000px;
height: 725px;
margin: 0px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
#positionimage {
position: absolute;
top: 108px;
left: 2;
}
#div {
width: 580;
height: 678;
overflow: scroll;
border: 1px solid white;
padding: 25;
margin: 25px;
position: absolute;
right: 100px;
top: 84px;
left: 988px;
}
.p {
color: white;
}
#h1 {
color: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: 837;
}
p {
width: 700px;
color: aliceblue;
padding: 20px;
margin: 10px;
position: absolute;
top: 1100px;
}
#h11 {
color: white;
position: relative;
top: 1070;
margin: 10px;
}
<body>
<div id="wrap">
<div id="header">
<div id="navWrap">
<div id="nav">
<div id="positionli">
<ul>
<li> Demo Link 1</li>
<li> Demo Link 2</li>
<li> Demo Link 3</li>
<li> Demo Link 4</li>
</ul>
</div>
<br class="clearLeft" />
</div>
</div>
</div>
</div>
<div id="positionimage">
<div class="imageframe">
<img class="image" src="https://www.qdtricks.net/wp-content/uploads/2016/05/hd-road-wallpaper.jpg">
</div>
</div>
<div id="div">
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fposts%2F1250296021672270&width=500" width="500" height="475" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fvideos%2F1266500823385123%2F&show_text=0&width=400" width="500" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"
allowFullScreen="true"></iframe>
</div>
<!-- <h1> _____Videos_____ </h1>-->
<!-- <h1 id="h11"> About us </h1> -->
<p> Infinitiv je troclani sastav nastao u Pozarevcu krajem 2010. koji danas radi i stvara u Beogradu. 2012. su izdali svoj prvi EP pod nazivom ,,Deep inside''. Posle dosta svirki sirom Srbije i ucesca na festivalima i takmicenjima(BDFL 2013, Majska gitarijada
2012), bend krajem 2013. objavljuje svoj prvi album ''U beskraj'', sa opcijom free download-a preko Nocturne magazine-a. Nakon toga, bend zapocinje koncertnu promociju pesama sa prvog albuma, kao i izradu i promociju pesama koje ce se naci na drugom
albumu cije je objavljivanje planirano za 2017 godinu. U julu 2016. bend osvaja prvo mesto na Kursumlijskoj gitarijadi
</p>
<br/>
</body>

Like #Sreenath already said: you use 'position: fixed' for your #wrap.
Try to use this:
#wrap {
z-index: 1;
margin: 0;
padding: 0;
position: relative;
left: 0;
top:0;
width: 100%;
}
Unless you want other behaviour, then you'll have to clearly mention what you want to achieve.