Reputation: 300

Scrolling div issue

I'm trying to solve a problem with scrolling on website. Take a look at this site. Scrolling down causes to slide up the "hidden" part of site. I wanna achieve the same effect, and it needs to be smooth sliding as well. I've tried to use scrollTop() and animate() but it doesn't work. I'm using JQuery. Let me post my code, here it is:

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 blocks should be the one sliding up while scrolling.

Look at this part:

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

        });
    });
    </script>

Upvotes: 1

Answers (1)

Noah Mayo

Reputation: 72

#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>

I changed the if else statements and added a new one try it!

Upvotes: 1

Scrolling div issue

Answers (1)

Related Questions