2013-09-17 3 views
0

Как я могу поместить мой слайд DIV на правой верхней части страницы при прокрутке вертикальной полосы здесь является Css мой кодКак прокрутки DIV с вертикальной полосой прокрутки

CSS

<style> 
       body { 
        width:100%; 
        overflow-x:hidden; 
        margin:0; 
       } 

       #slide { 
        background:rgba(0,0,0,0.4); 
        width: 200px; 
        float: right; 
        margin-right: -180px; 

       } 
       p { 
       color: red; 
       margin: 5px; 
       cursor: pointer; 
       float: right; 
       min-height: 200%;   
       } 
       p:hover { 
       background: yellow; 
       } 
</style> 

Вот мой HTML код HTML

<body> 
    <b>Jscript Animate Example</b> 
    <div id="slide"> 

      <ul> 
       <li>Home</li> 
       <li>About</li> 
       <li>Contact</li> 
      </ul> 
     </div> 

     <p>First Paragraph</p> 
     <p>Second Paragraph</p> 
     <p>Yet one more Paragraph</p> 
</body> 

мой Jquery код Jquery

<script> 

      var menu = 0; 
      $("#slide").click(function() { 

       if (menu == 0) { 
        menu = 1; 
        $(this).animate(
         {marginRight: '0px'},200 
        ); 
       } else { 
        menu = 0; 
        $(this).animate(
         {marginRight: '-180px'},200 
        ); 
       } 

      }); 
</script> 

но когда я прокрутки вниз, он перемещается на top.how я могу зафиксировать его на вершине даже я прокрутки вниз.

ответ

0

Вы пытались придать ему фиксированное положение и верхние, правые координаты?

+0

я уже пробовал, но лань исправить и работать, но из-за фиксированной я могу оживить DIV с помощью OnClick событие. –

+0

вы должны сделать анимацию по ширине контейнера, а не по марже: $ (this) .animate ({width: '200px'}) // показать это $ (this) .animate ({width: '10px'}) // Чтобы скрыть большую часть его и оставить только знак, что он есть –

+0

, я получил его thanx .. –

0

попробовать этот

#slide { 
    background:rgba(0,0,0,0.4); 
    width: 200px; 
    top: 0; 
    right: 0; 
    border: 1px solid #000000; 
    position: absolute; 
    } 

вы можете проверить его на http://jsfiddle.net/jU5YW/

+0

okk now i get thanxx –

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