2013-11-24 4 views
0

Я пытаюсь добавить некоторые функции к вопросу, который я недавно опубликовал.Как сделать jquery показать и скрыть изображение

как только вы прокрутите страницу вниз 200px, размер изображения изменится.

Я также хочу добавить следующие функции, но не могу заставить его работать.

1) когда вы прокручиваете экран вниз, я хочу, чтобы фоновое изображение исчезло, но как только вы прокрутите страницу назад, я хочу, чтобы она снова появлялась.

это легко достигается ???

благодарит за вашу помощь. , пожалуйста, обновите мою скрипку.

http://jsfiddle.net/LLbAu/6/

$(window).scroll(function() { 
if($(window).scrollTop() > 200){ 

    $("#profile-pic-bg img").css({ 
     "position": "absolute", 
     "top": "20px", 
     "left":"5px" , 
     "width":'50px' 
    }); 

}else{ 
    $('#profile-pic-bg img').css({'width': '145px',}); 
} 

});

ответ

1

Вы должны иметь дело с кодом CSS, используя класс в CSS и JQuery, просто добавлять и удалять, что класс. Чем проще изменить материал.

$(window).scroll(function() { 
if($(this).scrollTop() > 200) 

    $("#profile-pic-bg img").addClass('scrolled'); 

else 
    $("#profile-pic-bg img").removeClass('scrolled'); 

}); 

и CSS

#profile-pic-bg img { 
      position: absolute; 
      top: 20px; 
      left: 5px; 
      width:50px; 
    } 
#profile-pic-bg img.scrolled { 
    width: 145px; 
} 

}

0

Попробуйте $(document).scrollTop() также не забудьте $(document).ready(function(){ }); еще открыть консоль и найти ошибки :)

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