I'm in a blind spot with my small jQuery script.
The point is that I'm trying to make an element to rotate, and to apply the rotation value dynamically as the user is scrolling through the page.
It works here on stackoverflow but I can't get this to work on my website...
The only external library I'm using is JQuery.
Can you please tell me where is the problem?
var $animObject = $('.animateObject');
var $window = $(window);
$window.on('scroll', function() {
var fromTop = $window.scrollTop() / -4;
$animObject.css('transform', 'rotate(' + fromTop + 'deg)')
});
.header {
width: 100%;
height: 100vh;
background-image: url('https://simply-design.ml/dev/img/start1.jpg');
display: flex;
justify-content: center;
align-items: center;
}
.header-content {
padding: 30px;
max-width: 470px;
}
.header-wrapper {
padding: 50px;
border: solid 3px #fff;
}
.header h1 {
font-size: 30px;
color: #fff;
text-align: center;
}
.header p {
font-size: 20px;
color: #fff;
text-align: center;
}
.p-title {
font-size: 14px;
color: #fff;
}
.head-button {
padding: 10px 25px;
background-color: #3b88df;
color: #fff;
font-size: 20px;
cursor: pointer;
font-family: 'Source Sans Pro', sans-serif;
}
.head-button:hover {
background-color: #2c78ce;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<header class="header">
<div class="header-content">
<center>
<div class="header-wrapper animateObject">
<h1>title</h1>
<div style="height: 2px; width: 70px; background-color: #fff; margin: 20px;"></div>
<p>subtitle</p>
</div>
</center>
</div>
</header>
<div style="height: 1000px"></div>
Check this example I've made without jQuery, which shows how to rotate an element based on the scroll position of the window, but only once the element is in view.
I've decided to do this without jQuery because it's better for performance, working directly with the DOM instead of passing through jQuery, and also because it's relatively simple code, understandable.
Find out how much was scrolled
Get the target's element absolute position
Calculate if the element is within the viewport (if not, break)
If it's in, save the scroll value at that point
Subtract that value from the current scroll value to get the value from that point on
Use the new value as baseline for the transformation
var elm = document.querySelector('b');
var onScroll = (function(){
var startPos;
function run(){
var fromTop = window.pageYOffset,
rect = elm.getBoundingClientRect(),
scrollDelta;
// check if element is in viewport
if( (rect.top - window.innerHeight) <= 0 && rect.bottom > 0 )
startPos = startPos === undefined ? fromTop : startPos;
else{
startPos = 0;
return;
}
scrollDelta = (fromTop - startPos) * 1; // "speed" per scrolled frame
elm.style.transform = `translateX(${scrollDelta}px) rotate(${scrollDelta}deg)`;
console.clear();
console.log(scrollDelta);
}
run();
return run;
})()
window.addEventListener('scroll', onScroll);
html, body{ height:100%; }
body{ height:1500px; }
b{
position:fixed;
top: 20px;
left:20px;
width:100px;
height:100px;
background:red;
}
<b></b>
inspect the <b> element while scrolling and see that it only gets transform when it is in view.
Related
I am using the following HTML/Javascipt code to make the classic percentage bar.
function update() {
var element = document.getElementById("myprogressBar");
var width = 1;
var identity = setInterval(scene, 10);
function scene() {
if (width >= 70) {
clearInterval(identity);
} else {
width++;
element.style.width = width + '%';
element.innerHTML = width * 1 + '%';
}
}
}
#Progress_Status {
width: 50%;
background-color: #ddd;
}
#myprogressBar {
width: 1%;
height: 35px;
background-color: #4CAF50;
text-align: center;
line-height: 32px;
color: black;
}
<!DOCTYPE html>
<html>
<body>
<h3>Example of Progress Bar Using JavaScript</h3>
<p>Download Status of a File:</p>
<div id="Progress_Status">
<div id="myprogressBar">1%</div>
</div>
<br>
<button onclick="update()">Start Download</button>
</body>
</html>
What I would like to obtain and I am trying to achieve with .innerHTML is the following situation
The vertical line has to appear at the same level of the specified percentage.
For the vertical bar I used an added div nested inside the #Progress_Status container. It's styled to be absolute positioned and to change its offset in % in sync with the progress bar width.
For it to work, its container was set to position:relative as the reference frame.
function update() {
//fetches the vertical bar elements
var vbar = document.querySelector("#Progress_Status .percverticalbar");
var element = document.getElementById("myprogressBar");
var width = 1;
var identity = setInterval(scene, 10);
function scene() {
if (width >= 70) {
clearInterval(identity);
} else {
width++;
//updates the left offset of the vertical bar
vbar.style.left = `${width}%`;
element.style.width = width + '%';
element.innerHTML = width * 1 + '%';
}
}
}
#Progress_Status {
width: 50%;
background-color: #ddd;
position: relative;
}
.percverticalbar{
position: absolute;
height: 100px;
width: 5px;
background: gray;
top: -25px;
left: 0;
}
#myprogressBar {
width: 1%;
height: 35px;
background-color: #4CAF50;
text-align: center;
line-height: 32px;
color: black;
margin: 50px 0;
}
<h3>Example of Progress Bar Using JavaScript</h3>
<p>Download Status of a File:</p>
<div id="Progress_Status">
<div id="myprogressBar">1%</div>
<div class="percverticalbar"></div>
</div>
<br>
<button onclick="update()">Start Download</button>
You could just add an :after pseudo element and add the following styles to it. Keep in mind that the parent, in the case #myprogressBar should be relatively positioned.
#myprogressBar {
width: 1%;
height: 35px;
background-color: #4CAF50;
text-align: center;
line-height: 32px;
color: black;
position: relative;
}
#myprogressBar:after {
width: 5px;
height: 80px;
background: #333;
content: '';
position: absolute;
right: -5px;
top: 50%;
transform: translateY(-50%);
border-radius: 5px;
}
I'm trying to put go-to-top button in the bottom right angle of the screen. It should appear on scroll function, a disappear when I go back to top.
The button exists, but when I scroll down, it stays with "home page", so as I scroll more, it is not visible anymore. How to fix the problem? You can see my codes down here. Thanks a lot in advance!
window.onscroll = function(){goTop()};
let goTop = function() {
var rocket = document.querySelector(".go-to-top");
var scrollExt = document.body.scrollTop;
if(document.body.scrollTop > 500 || document.documentElement.scrollTop > 500){
rocket.style.display = "block";
} else{
rocket.style.position = "none";
}
};
let rocketClick = function() {
document.documentElement.scrollTop = 0;
}
.go-to-top{
display: none;
z-index: 10;
position: fixed;
bottom: 40px;
right: 40px;
width: 40px;
height: 40px;
transform: rotate(-45deg);
color: black;
padding: 10px;
text-decoration: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.go-to-top i{
font-size: 50px;
}
.go-to-top:hover{
cursor: pointer;
text-decoration: none;
}
<!--the rest of markup-->
<div class="rocket">
<a href="#" class="go-to-top">
<i class="fas fa-rocket"></i>
</a>
</div>
<script src="script.js"></script>
<!--closing markup-->
rocket.style.position:none would give your element the css style of position:none. none is not a valid value for the position property.
You can see the position values here -> CSS position
By the look of your code you would need to use display instead of position.
Also, you make a variable scrollExt and you do not use it. Plus, you make a rocketClick function but you do not call it on your element.
window.onscroll = function() {
goTop();
};
const goTop = function() {
const rocket = document.querySelector('.go-to-top');
const scrollExt = document.body.scrollTop;
if (scrollExt > 500 || document.documentElement.scrollTop > 500) {
rocket.style.display = 'block';
} else {
rocket.style.display = 'none';
}
};
const rocketClick = function() {
document.documentElement.scrollTop = 0;
};
main {
height:1500px;
background:red;
}
.go-to-top{
display: none;
z-index: 10;
position: fixed;
bottom: 40px;
right: 40px;
width: 40px;
height: 40px;
transform: rotate(-45deg);
color: black;
padding: 10px;
text-decoration: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.go-to-top i{
font-size: 50px;
}
.go-to-top:hover{
cursor: pointer;
text-decoration: none;
}
<main></main>
<div class="rocket" onclick=rocketClick()>
<a href="#" class="go-to-top">
rocket icon
</a>
</div>
Suggestions :
Keep using let and const. Do not use var. Also, use const for your functions. You do not change the content of the functions anywhere so you can use const instead of let.
Add an animation(transition) to the scrollTop.
I got problem with positioning 2 divs - I don't know which one will have longer. When my #rightcontent div is longer than #leftcontent i want to see end of content in #leftcontent stays at bottom of screen, like on this image:
And here is a code snippet:
for(var i=6000;i--;){
$('#rightcontent').append(i+ ' ');
$('#leftcontent').append("i ");
}
#font-face {
font-family: Gill Sans MT;
src: url("Gill Sans MT.ttf");
}
body{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#header{
position: fixed;
text-align: center;
font-size: 32px;
background: #f4f4e6;
padding-top: 2px;
min-width: 100%;
min-height: 28px;
}
#content{
padding-top: 38px;
text-align: center;
}
#footer{
position: fixed;
text-align: center;
background: #f4f4e6;
min-width: 100%;
font-style: italic;
font-family: Gill Sans MT;
letter-spacing: -1;
}
#rightcontent{
float: right;
max-width: 55%;
padding-bottom: 20px;
}
#leftcontent{
padding-bottom: 20px;
max-width: 45%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
Worki do odkurzaczy
</div>
<script>
document.write("<div id=content width=" + document.documentElement.clientWidth + "px height=" + (document.documentElement.clientHeight - 64) + "px style=padding-bottom:20px;min-height:" + (document.documentElement.clientHeight - 52) + "px; data-scroll-offset=28>");
</script>
<div id="rightcontent" name="target">
</div>
<div id="leftcontent">
</div>
</div>
<script>
document.write("<div id=footer style=top:" + (document.documentElement.clientHeight - 22) + "px;>");
//IDK WHY ON LOCAL TEST IS HERE -32px
</script>
Post Scriptum
I found a quiet simple answer here but I don't get this color example.
The behaviour you want is doable, but requires some basic understanding of mathematics, data binding, and event listening. What you basically want is to check, for each scroll event fired on the window object, that:
The shorter of the two elements, #leftcontent vs #rightcontent, has its bottom touching the bottom of the viewport
If yes, the shorter element will have a fix position so that it "sticks" to the bottom of the viewport
If no, the shorter element will be unfixed
The position fixing can be done by adding a .fixed class, which tells the browser to use position: fixed; bottom: 0; on the element. Now the interesting part: how do you know if the element has touched the bottom? The trick is simple:
You calculate the bottom of the viewport from the top. This is just the viewport height + the viewport scroll from the top of the document.
You calculate the bottom of the element from the top. This is the element's offset + the element's height.
When the value in point #1 is more than point #2, you know that you have scrolled beyond the bottom of the element. With that in mind, all you need is some logic to determine which of the two element is the shorter one: this is already covered in another StackOverflow question, so we can repurpose that logic for our use.
The last bit is that we only want to store the element's offset once: we use jQuery's .data() method to store the left + top offsets, and its height.
Here is a code that can be used:
function isBottom(el) {
// Cache element
var $el = $(el);
// Store element's offset and height once only
var elOffsetTop = $el.offset().top;
var elOffsetLeft = $el.offset().left;
var elHeight = $el.height();
if ($el.data('offsetTop') === void 0)
$el.data('offsetTop', elOffsetTop);
if ($el.data('offsetLeft') === void 0)
$el.data('offsetLeft', elOffsetLeft);
if ($el.data('height') === void 0)
$el.data('height', elHeight);
// Check if element is at bottom of viewport
var viewportBottom = $(window).height() + $(window).scrollTop();
var elementBottom = $el.data('offsetTop') + $el.data('height');
return viewportBottom > elementBottom;
}
$(window).on('scroll', function() {
// Get the shorter of the two elements
// From: https://stackoverflow.com/a/13319029/395910
var shortest = [].reduce.call($('#leftcontent, #rightcontent'), function(sml, cur) {
return $(sml).height() < $(cur).height() ? sml : cur;
});
// If element is bottom, add the class 'fixed'
$(shortest)
.toggleClass('fixed', isBottom(shortest))
.css('left', isBottom(shortest) ? $(shortest).data('offsetLeft') : 'auto');
});
Note that we need to assign a left property, because if the right column is the shorter one, we need to know how far it is originally offset from the left, so that position: fixed will position it correctly.
The .fixed class is dead simple:
#header {
// Other styles
// Add z-index so the fixed content does not overlay header
z-index: 1;
}
.fixed {
position: fixed;
bottom: 0;
z-index: 1;
}
Pro-tip: you might want to consider throttling/debouncing your scroll handler callback, for performance reasons.
See proof-of-concept example below:
for(var i=1000;i--;){
$('#rightcontent').append(i+ ' ');
$('#leftcontent').append("i ");
}
function isBottom(el) {
// Cache element
var $el = $(el);
// Store element's offset and height once only
var elOffsetTop = $el.offset().top;
var elOffsetLeft = $el.offset().left;
var elHeight = $el.height();
if ($el.data('offsetTop') === void 0)
$el.data('offsetTop', elOffsetTop);
if ($el.data('offsetLeft') === void 0)
$el.data('offsetLeft', elOffsetLeft);
if ($el.data('height') === void 0)
$el.data('height', elHeight);
// Check if element is at bottom of viewport
var viewportBottom = $(window).height() + $(window).scrollTop();
var elementBottom = $el.data('offsetTop') + $el.data('height');
return viewportBottom > elementBottom;
}
$(window).on('scroll', function() {
// Get the shorter of the two elements
// From: https://stackoverflow.com/a/13319029/395910
var shortest = [].reduce.call($('#leftcontent, #rightcontent'), function(sml, cur) {
return $(sml).height() < $(cur).height() ? sml : cur;
});
// If element is bottom, add the class 'fixed'
$(shortest)
.toggleClass('fixed', isBottom(shortest))
.css('left', isBottom(shortest) ? $(shortest).data('offsetLeft') : 'auto');
});
#font-face {
font-family: Gill Sans MT;
src: url("Gill Sans MT.ttf");
}
body{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#header{
position: fixed;
text-align: center;
font-size: 32px;
background: #f4f4e6;
padding-top: 2px;
min-width: 100%;
min-height: 28px;
z-index: 2;
}
#content{
padding-top: 38px;
text-align: center;
}
#footer{
position: fixed;
text-align: center;
background: #f4f4e6;
min-width: 100%;
font-style: italic;
font-family: Gill Sans MT;
letter-spacing: -1;
}
#rightcontent{
float: right;
max-width: 55%;
padding-bottom: 20px;
}
#leftcontent{
padding-bottom: 20px;
max-width: 45%;
}
.fixed {
position: fixed;
bottom: 0;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
Worki do odkurzaczy
</div>
<script>
document.write("<div id=content width=" + document.documentElement.clientWidth + "px height=" + (document.documentElement.clientHeight - 64) + "px style=padding-bottom:20px;min-height:" + (document.documentElement.clientHeight - 52) + "px; data-scroll-offset=28>");
</script>
<div id="rightcontent" name="target">
</div>
<div id="leftcontent">
</div>
<script>
document.write("<div id=footer style=top:" + (document.documentElement.clientHeight - 22) + "px;>");
//IDK WHY ON LOCAL TEST IS HERE -32px
</script>
I made a copy of JSbin for practice, JSbin link here, actual site link here.
This is just a practice for making the front-end of websites as I just started learning web dev little over a week ago. You can put in html, css and javascript in the editboxes, and a page spit out in Output just like the actual JSbin.
But the problem is that you can resize the divs pass other divs.
My idea to prevent this from happening is:
1. get the editboxes' current positions
2. store the left/right position of the editbox if resized to 10% window width
3. set the min/max left and right for the draggable div
And hence the question. How do I set the max-left/right for the draggable.
Also, any idea on why the draggable before Output div is diificult to drag to the right.
Edit: How the site is structured. When you drag the .drag (.resize in my JSbin code), it changes its left and right div's left and right. And the draggables are contained in the #main's div.
<div id="main>
<div id="HTML"></div>
<div class="drag"></div> //drag this left and right to change the right of the HTML and left of CSS
<div id="CSS"></div>
<div class="drag"></div> //drag this left and right to change the right of the Css and left of JavaScript
<div id="JavaScript"></div>
<div class="drag"></div> //drag this left and right to change the right of the JavaScript and left of Output
<div id="Output"></div>
</div>
By taking advantage of jQuery Ui's built in draggable event which gives us position information and also allows us to set position on drag.
I came up with the following solution:
var dragDistance = 100;
$(".resize").draggable({
axis: "x",
containment: "parent",
drag: function( event, ui){
ui.position.left = Math.min( ui.position.left, ui.helper.next().offset().left + ui.helper.next().width()-dragDistance);
ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance);
resize();
}
});
I removed your onDrag function in the process so it wouldn't interfere.
See the bin here:
JSBin
NOTES:
I haven't looked into it and maybe its just a JSBin issue because I can't reproduce it in your live site. But if the boundary lines disappear while you are dragging the code won't work. You'll probably have to increase the drag distance to the point where the lines don't disappear while dragging.
You may notice you have difficulty dragging the Output box that seems to be caused by the Iframe you have inside. If I comment out the IFrame I can drag it just fine. I haven't looked for a solution but perhaps experiment with some padding or margins so that the Iframe is not pegged so closely against the border. Or maybe if you detached it from the DOM while dragging that would fix it.
Use containment
Constrains dragging to within the bounds of the specified element or
region.
For Eg:
$( ".selector" ).draggable({
containment: "parent"
});
Click Here For a Demo
You could manually keep track of the position of each of the windows in the dragging() function, and only call the resize() method if they don't overlap:
function dragging(event) {
var CSS_left = parseInt($("#CSS").css("left"));
var JavaScript_left = parseInt($("#JavaScript").css("left"));
var Output_left = parseInt($("#Output").css("left"));
var offset = 100;
var checkOverlap1 = $(event.target).is("#1")
&& event.clientX + offset <= JavaScript_left
&& event.clientX >= offset;
var checkOverlap2 = $(event.target).is("#2")
&& event.clientX + offset <= Output_left
&& event.clientX - offset >= CSS_left;
var checkOverlap3 = $(event.target).is("#3")
&& event.clientX - offset >= JavaScript_left
&& event.clientX <= codeboxWidth - offset;
if (checkOverlap1 || checkOverlap2 || checkOverlap3) {
resize(event);
}
}
Here's the complete example - I also refactored/simplified your "resize" function.
var codeboxWidth = $("#codebox").width();
$(document).ready(function() {
$("#codebox").height($(window).height() - $("#topbar").height());
$(".content").height($("#codebox").height());
$(".editbox").height($(".content").height() - $(".contentheader").height());
$("#HTML").css("left", 0);
$("#HTML").css("right", "75%");
$("#CSS").css("left", "25%");
$("#CSS").css("right", "50%");
$("#JavaScript").css("left", "50%");
$("#JavaScript").css("right", "25%");
$("#Output").css("left", "75%");
$("#Output").css("right", 0);
});
function resize(event) {
if ($(event.target).is("#1")) {
$("#CSS").css("left", event.clientX);
$("#HTML").css("right", codeboxWidth - event.clientX);
}
if ($(event.target).is("#2")) {
$("#JavaScript").css("left", event.clientX);
$("#CSS").css("right", codeboxWidth - event.clientX);
}
if ($(event.target).is("#3")) {
$("#Output").css("left", event.clientX);
$("#JavaScript").css("right", codeboxWidth - event.clientX);
}
}
$(".resize").draggable({
axis: "x"
});
function dragging(event) {
var CSS_left = parseInt($("#CSS").css("left"));
var JavaScript_left = parseInt($("#JavaScript").css("left"));
var Output_left = parseInt($("#Output").css("left"));
var offset = 100;
var checkOverlap1 = $(event.target).is("#1")
&& event.clientX + offset <= JavaScript_left
&& event.clientX >= offset;
var checkOverlap2 = $(event.target).is("#2")
&& event.clientX + offset <= Output_left
&& event.clientX - offset >= CSS_left;
var checkOverlap3 = $(event.target).is("#3")
&& event.clientX - offset >= JavaScript_left
&& event.clientX <= codeboxWidth - offset;
if (checkOverlap1 || checkOverlap2 || checkOverlap3) {
resize(event);
}
}
body {
margin: 0;
padding: 0;
overflow-y: hidden;
overflow-x: hidden;
background: #F7F7F7;
font-family: Arial;
}
#topbar {
margin: 0;
padding: 0;
width: 100%;
height: 35px;
background: #EEEEEE;
position: relative;
}
h2 {
margin: 2px 0 0 0;
padding: 0;
float: left;
position: absolute;
}
#control {
width: 100%;
margin: 8px 0 0 0;
padding: 0;
position: absolute;
text-align: center;
}
.option {
margin: 0 -5px 0 0;
padding: 5px 10px 5px 10px;
text-align: center;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
text-decoration: none;
font-size: 0.9em;
color: black;
}
.option:first-child {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.option:last-child {
border-right: 1px solid #CCC;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
.option:hover {
background: #dee5e5;
}
.opactive {
background: #EBF3FF;
}
.opinactive {
background: 0;
}
.active {
display: block;
}
.inactive {
display: none;
}
#codebox {
margin: 0;
padding: 0 width: 100%;
position: static;
top: 35px;
background: white;
}
.content {
margin: 0;
padding: 0;
min-width: 10%;
max-width: 100%;
position: absolute;
float: left;
color: #6DCAFC;
background: #F7F7F7;
overflow: hidden;
}
.resize {
top: 35px;
bottom: 0px;
width: 1px;
margin-left: 0;
height: 100%;
right: auto;
opacity: 0;
position: absolute;
cursor: ew-resize;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgba(218, 218, 218, 0.498039);
z-index: 99999;
background: #666;
}
.contentheader {
margin: 0;
padding: 0;
background: transparent;
position: relative;
}
.selectedcontent {
background: white;
}
.contentbox {
width: 100%;
height: 100%;
background: transparent;
position: relative;
box-sizing: border-box;
border-right: 1px solid darkgrey;
overflow: hidden;
}
.editbox {
width: 100%;
height: 100%;
background: transparent;
overflow: hidden;
}
.textareabox {
background: transparent;
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
border: none;
outline: none;
resize: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Project 04</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div id="topbar">
<h2>Code Runner</h2>
<div id="control">
HTML
CSS
JavaScript
Output
</div>
</div>
<div id="codebox">
<div id="HTML" class="content active">
<div class="contentbox">
<div class="contentheader">HTML</div>
<div class="editbox" id="HTMLeditbox">
<textarea id="HTMLcode" class="textareabox"></textarea>
</div>
</div>
</div>
<div class="resize active" id="1" style="left: 25%" ondrag="dragging(event)"></div>
<div id="CSS" class="content active">
<div class="contentbox">
<div class="contentheader">CSS</div>
<div class="editbox" id="CSSeditbox">
<textarea id="CSScode" class="textareabox"></textarea>
</div>
</div>
</div>
<div class="resize active" id="2" style="left: 50%" ondrag="dragging(event)"></div>
<div id="JavaScript" class="content active">
<div class="contentbox">
<div class="contentheader">JavaScript</div>
<div class="editbox" id="JavaScripteditbox">
<textarea id="JavaScriptcode" class="textareabox"></textarea>
</div>
</div>
</div>
<div class="resize active" id="3" style="left: 75%" ondrag="dragging(event)"></div>
<div id="Output" class="content active">
<div class="contentbox">
<div class="contentheader">Output</div>
<div class="editbox" id="Outputbox">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jscript.js"></script>
</body>
</html>
Here's a JSBin based on your example.
I need a 'Page section' to stick in place for (x) amount of scrolling and then move onto the next section. I've tried putting them into the child theme but nothing... Can someone tell me a good way to do wthis that's not Javascript heavy?
CSS
.isSticky {
top: 0;
position: fixed;
}
HTML
<div>
<section id="top"></section>
<section id="test2"></section>
<section id="bottom"></section>
</div>
JS
$(document).ready(function () {
var el = $('#test2');
var elTop = el.position().top;
$(window).scroll(function () {
var windowTop = $(window).scrollTop();
if (windowTop >= elTop) {
el.addClass('isSticky');
} else {
el.removeClass('isSticky');
}
This answer might not be 100% pragmatic, due to current lack of support, but soon you will be able to use the position: sticky property of CSS, currently supported in Firefox and prefixed in Safari/iOS (Caniuse).
The feature was previously enabled in Chrome, but then subsequently removed in the interest of re-doing it more efficiently.
html, body {
margin: 0;
}
body * {
margin: 20px;
padding: 20px;
}
.header {
margin: 0;
padding: 20px;
background: #000;
}
.header span {
display: block;
color: #fff;
margin: 0 auto;
text-align: center;
padding: 0;
}
.placeholder {
border: 1px solid black;
margin: 0 auto;
text-align: center;
height: 300px;
}
.slider {
background: #006264;
color: white;
font-weight: bold;
margin: 0 auto;
position: sticky;
top: 0px;
}
<div class="header"><span>This is a header</span></div>
<div class="placeholder">This div holds place</div>
<div class="slider">This should slide up and then stick.</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>