Question

我试图重写jQuery for JS的脚本。不幸的是，出了点问题并且脚本不起作用。

我在JS中的例子：http://jsfiddle.net/kzywiec/f0x6e1cd/

请修改代码或建议如何修复它。

$(document).ready(function() {

  var boxLeft = $("#box").position().left;
  var containerHeight = $("#box").closest("#content").height();
  var containerOffset = $("#box").closest("#content").offset().top;
  var height = $("#box").outerHeight();

  $(window).scroll(function() {
    $("#box").each(function() {
      var windowScroll = $(window).scrollTop();
      if (windowScroll < containerOffset) {
        $(this).removeClass("fixed bottom");
      } else if (windowScroll > containerHeight + containerOffset - height) {
        $(this).removeClass("fixed").addClass("bottom").css({
          "left": ""
        });
      } else {
        var leftValue = boxLeft + $(this).closest("#content").offset().left;
        $(this).removeClass("bottom").addClass("fixed").css({
          "left": leftValue
        });
      }
    });
  });

});

我在JS中的代码：

＆＃13;

function stickyContent() {
  var box = document.getElementById("box"), 
      boxLeft = box.offsetLeft;
  /*document.getElementById("demo").innerHTML = boxLeft; //nieważne*/

  var containerHeight = document.getElementById("box").closest('div');
  containerHeight = parseInt(getComputedStyle(containerHeight).height);


  var rect = box.getBoundingClientRect();
  var containerOffset = rect.top;

  var height = document.getElementById("box").offsetHeight;

  window.onscroll = function() {
    document.querySelectorAll("box").forEach(function() {
      var windowScroll = window.onscroll.scrollTop();
      if (windowScroll < containerOffset) {
        this.classList.remove("fixed bottom");
      } else if (windowScroll > containerHeight + containerOffset - height) {
        this.classList.remove("fixed").classList.add("bottom").style.left = '';
      } else {
        var conten_value = document.getElementById("content").rect.top;
        var leftValue = boxLeft + this.conten_value.offsetLeft;
        this.classList.remove("bottom").classList.add("fixed").style.left = leftValue;
      }
    });
  }
}
window.onload=function() {
  stickyContent();
}

＆＃13;

 body {
   font-family: Arial;
 }
 
 #wrap {
   width: 800px;
   margin: 0 auto;
 }
 
 #header,
 #footer {
   height: 600px;
   background-color: #ccf;
 }
 
 #content {
   position: relative;
   overflow: auto;
 }
 
 #main {
   float: left;
   width: 610px;
 }
 
 #main p {
   margin: 15px 0 15px 0;
 }
 
 #aside {
   float: left;
   width: 190px;
 }
 
 #box {
   border: 2px solid red;
   width: 186px;
   background-color: #fcc;
   height: 200px;
   margin-top: 15px;
 }
 
 .fixed {
   position: fixed;
   top: 0;
 }
 
 .bottom {
   position: absolute;
   bottom: 15px;
   right: 0;
 }

＆＃13;

<div id="wrap">
  <div id="header"></div>
  <div id="content">
    <div id="main">
      <p>Lorem ipsum dolor sit 5amet, consectetur adipiscing elit. Suspendisse congue feugiat purus nec ornare. Morbi in diam sit amet erat iaculis gravida id sed mauris. Nunc vitae lacus varius risus elementum ultricies auctor nec eros. Vivamus vulputate
        quam risus, eget pharetra eros. Integer nec viverra nisi. Mauris pharetra velit nec nunc dignissim in pulvinar dui pellentesque. Donec volutpat malesuada odio, nec convallis tellus interdum eget. Pellentesque dictum varius vulputate. Nam quis
        auctor turpis. Donec consectetur lacus vitae arcu porta ut iaculis sem porttitor.</p>
      <p>Lorem ipsum dolor sit 5amet, consectetur adipiscing elit. Suspendisse congue feugiat purus nec ornare. Morbi in diam sit amet erat iaculis gravida id sed mauris. Nunc vitae lacus varius risus elementum ultricies auctor nec eros. Vivamus vulputate
        quam risus, eget pharetra eros. Integer nec viverra nisi. Mauris pharetra velit nec nunc dignissim in pulvinar dui pellentesque. Donec volutpat malesuada odio, nec convallis tellus interdum eget. Pellentesque dictum varius vulputate. Nam quis
        auctor turpis. Donec consectetur lacus vitae arcu porta ut iaculis sem porttitor.</p>
      <p>Lorem ipsum dolor sit 5amet, consectetur adipiscing elit. Suspendisse congue feugiat purus nec ornare. Morbi in diam sit amet erat iaculis gravida id sed mauris. Nunc vitae lacus varius risus elementum ultricies auctor nec eros. Vivamus vulputate
        quam risus, eget pharetra eros. Integer nec viverra nisi. Mauris pharetra velit nec nunc dignissim in pulvinar dui pellentesque. Donec volutpat malesuada odio, nec convallis tellus interdum eget. Pellentesque dictum varius vulputate. Nam quis
        auctor turpis. Donec consectetur lacus vitae arcu porta ut iaculis sem porttitor.</p>
      <p>Lorem ipsum dolor sit 5amet, consectetur adipiscing elit. Suspendisse congue feugiat purus nec ornare. Morbi in diam sit amet erat iaculis gravida id sed mauris. Nunc vitae lacus varius risus elementum ultricies auctor nec eros. Vivamus vulputate
        quam risus, eget pharetra eros. Integer nec viverra nisi. Mauris pharetra velit nec nunc dignissim in pulvinar dui pellentesque. Donec volutpat malesuada odio, nec convallis tellus interdum eget. Pellentesque dictum varius vulputate. Nam quis
        auctor turpis. Donec consectetur lacus vitae arcu porta ut iaculis sem porttitor.</p>
      <p>Lorem ipsum dolor sit 5amet, consectetur adipiscing elit. Suspendisse congue feugiat purus nec ornare. Morbi in diam sit amet erat iaculis gravida id sed mauris. Nunc vitae lacus varius risus elementum ultricies auctor nec eros. Vivamus vulputate
        quam risus, eget pharetra eros. Integer nec viverra nisi. Mauris pharetra velit nec nunc dignissim in pulvinar dui pellentesque. Donec volutpat malesuada odio, nec convallis tellus interdum eget. Pellentesque dictum varius vulputate. Nam quis
        auctor turpis. Donec consectetur lacus vitae arcu porta ut iaculis sem porttitor.</p>
      <p>Lorem ipsum dolor sit 5amet, consectetur adipiscing elit. Suspendisse congue feugiat purus nec ornare. Morbi in diam sit amet erat iaculis gravida id sed mauris. Nunc vitae lacus varius risus elementum ultricies auctor nec eros. Vivamus vulputate
        quam risus, eget pharetra eros. Integer nec viverra nisi. Mauris pharetra velit nec nunc dignissim in pulvinar dui pellentesque. Donec volutpat malesuada odio, nec convallis tellus interdum eget. Pellentesque dictum varius vulputate. Nam quis
        auctor turpis. Donec consectetur lacus vitae arcu porta ut iaculis sem porttitor.</p>
      <p>Lorem ipsum dolor sit 5amet, consectetur adipiscing elit. Suspendisse congue feugiat purus nec ornare. Morbi in diam sit amet erat iaculis gravida id sed mauris. Nunc vitae lacus varius risus elementum ultricies auctor nec eros. Vivamus vulputate
        quam risus, eget pharetra eros. Integer nec viverra nisi. Mauris pharetra velit nec nunc dignissim in pulvinar dui pellentesque. Donec volutpat malesuada odio, nec convallis tellus interdum eget. Pellentesque dictum varius vulputate. Nam quis
        auctor turpis. Donec consectetur lacus vitae arcu porta ut iaculis sem porttitor.</p>
      <p>Lorem ipsum dolor sit 5amet, consectetur adipiscing elit. Suspendisse congue feugiat purus nec ornare. Morbi in diam sit amet erat iaculis gravida id sed mauris. Nunc vitae lacus varius risus elementum ultricies auctor nec eros. Vivamus vulputate
        quam risus, eget pharetra eros. Integer nec viverra nisi. Mauris pharetra velit nec nunc dignissim in pulvinar dui pellentesque. Donec volutpat malesuada odio, nec convallis tellus interdum eget. Pellentesque dictum varius vulputate. Nam quis
        auctor turpis. Donec consectetur lacus vitae arcu porta ut iaculis sem porttitor.</p>
    </div>
    <div id="aside">
      <div id="box" class="visible"></div>
    </div>
  </div>
  <div id="footer"></div>
</div>

＆＃13;

粘性内容JavaScript

0 个答案: