Jquery的新手,需要一些帮助

时间:2015-05-18 23:43:28

标签: jquery

这是我在Stackoverflow上的第一篇文章,我很高兴与这个社区分开。我想问一个问题,我会尽力将其格式化,并且#34;第一次在这里询问技术问题"。所以这就是交易......

我正在尝试创建一个Jquery脚本,该脚本将执行与苹果在其网站上相同的功能,左侧的图像https://www.apple.com/imac-with-retina/交换出来并从绝对位置更改为固定位置再返回绝对位置。我也设置了一个jsfiddle,并且会喜欢一些输入。我对Jquery很新,但还没有完全掌握它。谢谢你的时间!



function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    $('#sticky').addClass('stick');
  } else {
    $('#sticky').removeClass('stick');
  }
}
$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});

#sticky {
  z-index: 1;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 766px 1494px;
  height: 1494px;
  width: 766px;
  background-image: url("https://www.apple.com/v/imac-with-retina/a/images/overview/apps_start_large.jpg");
}
#sticky.stick {
  z-index: 2;
  position: fixed;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  background-repeat: no-repeat;
  background-size: 766px 1494px;
  height: 1494px;
  width: 766px;
  background-image: url("https://www.apple.com/v/imac-with-retina/a/images/overview/apps_end_large.jpg");
  top: 0px;
}
.imagechanger {
  height: 1494px;
  margin-left: 0px;
  position: relative;
  top: 0px;
  width: 766px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="imagechanger">
      <div id="sticky-anchor"></div>
      <div id="sticky"></div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right">
      <p>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nibh arcu, semper tincidunt consectetur non, fermentum at ligula. Pellentesque sapien ante, tincidunt in nisl eu, ornare tristique ex. Etiam blandit tristique metus congue maximus. Maecenas
        tincidunt eros erat, sodales posuere metus laoreet id. Donec luctus augue in sapien auctor, sit amet posuere nisi cursus. Donec quis quam quis magna mattis vestibulum. Maecenas fringilla gravida lorem id facilisis. In auctor quis erat vel porta.
        Donec at mi magna. Vestibulum ultricies viverra cursus. Phasellus lacinia condimentum erat, quis ultricies lacus lacinia in. Ut nec libero vitae diam rutrum efficitur. Donec et volutpat mauris. Nunc sed massa id dolor accumsan eleifend ut quis
        nulla. Sed aliquam nisl at rhoncus porta. Aliquam ipsum arcu, finibus vitae metus vitae, iaculis consequat ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent feugiat massa nunc, at blandit diam
        posuere ut. Phasellus quis massa porta, commodo nisl vitae, molestie nisl. Quisque metus erat, varius id lorem quis, auctor tempor diam. Vestibulum mollis ante ac elit fermentum venenatis. Integer vitae massa facilisis, imperdiet lectus non, hendrerit
        dui. Nunc tincidunt dignissim sem, quis laoreet nisl gravida vitae. Fusce feugiat mi eu nisi tempus, ut efficitur ipsum rhoncus. Etiam arcu ligula, elementum ac dapibus vel, ultrices quis magna. Fusce et justo pellentesque, consequat ipsum semper,
        tincidunt tellus. Ut lacinia nibh at euismod suscipit. Cras fermentum arcu tellus, congue suscipit ligula lacinia sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer tristique sem sit amet nunc eleifend maximus. Integer
        nisl justo, egestas nec ultricies eu, suscipit nec ligula. Sed ut arcu ipsum. Mauris sollicitudin sem nec purus pulvinar, eu iaculis nunc hendrerit. Ut diam massa, laoreet non fringilla nec, pretium eget metus. Aenean interdum pretium magna et
        tempus. Donec pretium, nisl sed vulputate vehicula, urna odio rhoncus purus, vitae cursus purus diam eget ex. Donec sem ipsum, lobortis vel rhoncus in, faucibus id eros. Suspendisse molestie enim sodales urna consectetur tristique quis ut ligula.
        In hac habitasse platea dictumst. Nam porta sollicitudin velit, eu efficitur magna. Nulla ullamcorper, mauris vitae aliquam feugiat, nunc enim iaculis elit, non auctor mi risus sed lectus. Vestibulum venenatis posuere bibendum. Nulla ac lacus
        scelerisque, tincidunt velit nec, cursus lorem. Nunc vitae aliquet nisl, sit amet scelerisque purus. Morbi laoreet facilisis nibh, eget gravida eros iaculis quis. Mauris in odio eget lectus fringilla rhoncus. Mauris sed odio velit. Phasellus orci
        erat, tincidunt ac arcu id, bibendum dapibus diam. Duis elit lacus, accumsan eu urna non, aliquam interdum lectus. Curabitur accumsan dolor non purus euismod dignissim. Quisque euismod purus sed massa aliquet sollicitudin. Proin pellentesque lacinia
        dui sed tristique. Donec at porttitor tortor. Nunc aliquam, nisi sed vestibulum vestibulum, neque sem dapibus ipsum, a suscipit sem ex mattis arcu. Mauris molestie mauris in faucibus fermentum. Praesent placerat pellentesque ipsum suscipit fermentum.</p>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案