Force Div Element to Stay in Same Place, When Page Is Scrolled

Force div element to stay in same place, when page is scrolled

Change position:absolute to position:fixed;.

Example can be found in this jsFiddle.

How do I make my div stay in one position while I move the page around

Using the marquee tag is not standard.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

Also I would avoid to wrap a div with a p tag as it's semantically not correct and are supposed to contain only inline elements.

I would separate the styling from the div tag. and do something like this:
https://jsfiddle.net/Mehdikit/bs9shwt0/

HTML & CSS

.container {  position: relative;  height: 2000px;}
.scroll-left {  position: fixed;  right: 0;  top: 0;  height: 83px;}

<div class="container">  <div class="scroll-left" id="page">    <p>This is made by an organization </p>    <br />    <strong>DO NOT COPY!</strong>    <br />    <hr />  </div></div>

Make div stay in one place no matter how matter the height of the page

Added a class .fixed with position:fixed to the element that should stay on one place, also fixed your html layout. See https://codepen.io/anon/pen/joYmvV?editors=1100

Update:
You can also add position:sticky instead of position:fixed - It produces a nice effect. See the updated code https://codepen.io/anon/pen/joYmvV?editors=1100

Make div stay at bottom of page's content all the time even when there are scrollbars

This is precisely what position: fixed was designed for:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Here's the fiddle: http://jsfiddle.net/uw8f9/

how to make a div stays in place while scrolled without jquery?

Use this HTML:

<div id="myElement" style="position: absolute">This stays at the top</div>

Javascript:

$(window).scroll(function() {
    $('#myElement').css('top', $(this).scrollTop() + "px");
});

It attaches an event to the window's scroll and moves the element down as far as you've scrolled.

How to force a div to stay a fixed distance from the top of the screen when scrolling?

so you're saying that you want to keep 30 pixels spacing on the top of the div, but still want to be able to scroll down? In that case, i think you have to make the div itself scrollable. But since that's not what you want, how about overlaying another div with position:fixed and the same background color?

  <body>
    <div class="overlay"></div>
    <div class="content">
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
    </div>
  </body>

body {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%;
}

.content {
  position: relative;
  padding-top: 50px;
  z-index: 1000;
  background: white;
  width: 300px;
}

.overlay {
  position: fixed;
  height: 50px;
  width: 100%;
  z-index: 2000;
  background: white;
}

How can I make a div stick to the top of the screen once it's been scrolled to?

You could use simply css, positioning your element as fixed:

.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

Edit: You should have the element with position absolute, once the scroll offset has reached the element, it should be changed to fixed, and the top position should be set to zero.

You can detect the top scroll offset of the document with the scrollTop function:

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

When the scroll offset reached 200, the element will stick to the top of the browser window, because is placed as fixed.

How do I make a div move up and down when I'm scrolling the page?

You want to apply the fixed property to the position style of the element.

position: fixed;

What browser are you working with? Not all browsers support the fixed property. Read more about who supports it, who doesn't and some work around here

http://webreflection.blogspot.com/2009/09/css-position-fixed-solution.html

Force Div Element to Stay in Same Place, When Page Is Scrolled