Прокрутка div issue

Я пытаюсь решить проблему с прокруткой на веб-сайте. Посмотрите на это site. Прокрутка вниз приводит к сдвигу «скрытой» части сайта. Я хочу добиться такого же эффекта, и он должен быть плавным скольжением. Я попытался использовать scrollTop() и animate(), но он не работает. Я использую JQuery. Позвольте мне опубликовать мой код, вот он:Прокрутка div issue

HTML

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> 
    <link href="stylin.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      $(".button").toggle(function(){ 
       $("#blocks").animate({top: 200}, 500); 
      }, 
      function(){ 
       $("#blocks").animate({top: 760}, 500); 
      }); 
     }); 
    </script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $(document).scroll(function() { 
    $("#blocks").animate({top: (780-$(this).scrollTop())}, 1000); 

    }); 
}); 
</script> 
    </head> 
    <body> 
    <div id="main"> 
     <div id="photo"> 
     </div> 
     <div id="blocks"> 
      <div id="button_block"> 
       <a href="#" class="button" ><img src="scrollup.png" /></a> 
      </div> 
     </div> 
    </div> 
    </body> 
</html>

CSS

#main { 
    width: 1500px; 
    position:absolute; 

} 

#photo{ 
    position:fixed; 
    top:0; 
    width:1500px; 
    height:780px; 
    background-color:blue; 
    z-index:0; 

} 

#blocks{ 
    position:absolute; 
    top: 760px; 
    width: 100%; 
    height: 1000px; 
    background-color: red; 
    z-index:1; 
} 

#button_block{ 
    position:absolute; 
    width:100%; 
    height:64px; 
    top:-32px; 
} 

.button 
{ 
    display:block; 
    position: absolute; 
    right: 686px; 
}

Div блоки должен быть один скользя во время прокрутки.

Посмотрите на этой части:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(document).scroll(function() { 
     $("#blocks").animate({top: (780-$(this).scrollTop())}, 1000); 

     }); 
    }); 
    </script>

источник

2015-04-22 sheddar

Вы используете очень старую версию jQuery. –

#main { 
 
    width: 1500px; 
 
    position:absolute; 
 

 
} 
 

 
#photo{ 
 
    position:fixed; 
 
    top:0; 
 
    width:1500px; 
 
    height:780px; 
 
    background-color:blue; 
 
    z-index:0; 
 

 
} 
 

 
#blocks{ 
 
    position:absolute; 
 
    top: 760px; 
 
    width: 100%; 
 
    height: 1000px; 
 
    background-color: red; 
 
    z-index:1; 
 
} 
 

 
#button_block{ 
 
    position:absolute; 
 
    width:100%; 
 
    height:64px; 
 
    top:-32px; 
 
} 
 

 
.button 
 
{ 
 
    display:block; 
 
    position: absolute; 
 
    right: 686px; 
 
} 
 

 
#scroll_to_top{ 
 
    display:none; 
 
    position:fixed; 
 
    bottom:15px; 
 
    right:20px; 
 
    opacity:0.8; 
 
    z-index:9999; 
 
} 
 
#scroll_to_top:hover{ 
 
    opacity:1; 
 
}

<html> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> 
 
    <link href="stylin.css" rel="stylesheet" type="text/css" /> 
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
 
    <script type="text/javascript"> 
 
     $(function(){ 
 
      $(".button").toggle(function(){ 
 
       $("#blocks").animate({top: 200}, 500); 
 
      }, 
 
      function(){ 
 
       $("#blocks").animate({top: 760}, 500); 
 
      }); 
 
     }); 
 
    </script> 
 

 
    <script type="text/javascript"> 
 
     $(function(){ 
 
      var stt_is_shown = false; 
 
      $(window).scroll(function(){ 
 
      var win_height = 300; 
 
      var scroll_top = $(document).scrollTop(); 
 
      if (scroll_top > win_height && !stt_is_shown) { 
 
       stt_is_shown = true; 
 
       $("#scroll_to_top").fadeIn(); 
 
      } else if (scroll_top < win_height && stt_is_shown) { 
 
         stt_is_shown = false; 
 
         $("#scroll_to_top").fadeOut(); 
 
         }else if{ 
 
          <script type="text/javascript"> 
 
$(document).ready(function() { 
 
    $(document).scroll(function() { 
 
    $("#blocks").animate({top: (780-$(this).scrollTop())}, 1000); 
 
} 
 
    }); 
 
}); 
 
</script> 
 
      }); 
 
      $("#scroll_to_top").click(function(e){ 
 
       e.preventDefault(); 
 
       $('html, body').animate({scrollTop:0}, 1000); 
 
      }); 
 
     }); 
 
</script> 
 
<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    $(document).scroll(function() { 
 
    $("#blocks").animate({top: (780-$(this).scrollTop())}, 1000); 
 

 
    }); 
 
}); 
 
</script> 
 
    </head> 
 
    <body> 
 
    <div id="main"> 
 
     <div id="photo"> 
 
     </div> 
 
     <div id="blocks"> 
 
      <div id="button_block"> 
 
       <a href="#" class="button" ><img src="scrollup.png" /></a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <a href="#" id="scroll_to_top"><img src="scrollup.png" /></a> 
 
    </body> 
 
</html>

я изменил, если другое заявление и добавил новые один попробовать!

источник

2015-04-22 07:34:35

Это не то, что я имел в виду. Пропустить кнопки, кнопка scroll_to_top прокручивает страницу вверх, она отлично работает, другая кнопка также работает, и я хочу сделать тот же эффект с помощью полосы прокрутки. Вы просмотрели эту страницу? [Link] (http://www.firstscribe.com/) Прокрутка мыши приводит к тому, что остальная часть страницы скользит вверх или вниз, зависит от направления прокрутки. – sheddar

Что вы имеете в виду, какой эффект вы хотите, чтобы полоса прокрутки делала? –

Вы хотите, чтобы верхний бар делал то же самое или что-то еще? пожалуйста, напишите более подробно. –

Прокрутка div issue

ответ

Смежные вопросы