Фоновое изображение тела и JQuery - PullRequest
Новая
       8

Фоновое изображение тела и JQuery

1 голос
/ 07 февраля 2012

Я знаю jquery , и у меня возникли некоторые проблемы с попыткой заставить что-то работать.

В основном у меня есть сайт WordPress, на каждой странице есть свое фоновое изображениедля тега body.Я хочу иметь возможность переключаться на кнопку, а затем фоновое изображение тела уменьшаться примерно на 500 пикселей.

В основном у меня есть скрытая область контактов в верхней части моей страницы, и когда вы нажимаете кнопку (.contact) скрытая область контакта (#contactArea) раскрывается при опускании сверху вниз, однако при падении contactArea часть моего фонового изображения скрывается, пока вы снова не нажмете кнопку.

Что я пытаюсьЧтобы достичь, нужно, чтобы фоновое изображение исчезло (все еще полностью видимым), когда обнаружена скрытая область контакта, так что фоновое изображение всегда видно ... Надеюсь, это имеет смысл?!

мой код CSS:

body.page.page-id-240 {background: url (images / main-home-bg.jpg) center 600px без повторов;

Мой текущийJQuery это: 

$(window).load(function() {
$("#contactArea").css('height', '0px');

$("a.contact").toggle( 
            function () { 
                $("#contactArea").animate({height: "225px"}, {queue:false, duration: 500, easing: 'linear'} )
            }, 
            function () { 
                $("#contactArea").animate({height: "0px"}, {queue:false, duration: 500, easing: 'linear'}) 
            } 
    ); 


});

Если кто-то может помочь, это будет очень признателен!: -)

1 Ответ

0 голосов
/ 07 февраля 2012

Самый простой способ добиться этого - добавить в код тела, который отображает область контактов, дополнительный тег CSS, например reposition-bg.Затем определите соответствующий класс CSS для изменения позиции BG тела.Имеет ли это смысл?

CSS: 

body.reposition-bg {
    /*your new position for when contact area is exposed*/
    background-position-y: 200px 
}

и измените свой JS на: 

$(window).load(function() {
$("#contactArea").css('height', '0px');

$("a.contact").toggle( 
            function () { 
                $("body").addClass("reposition-bg");
                $("#contactArea").animate({height: "225px"}, {queue:false, duration: 500, easing: 'linear'} )
            }, 
            function () { 
                $("#contactArea").animate({height: "0px"}, {queue:false, duration: 500, easing: 'linear'}) 
            } 
    ); 


});

В качестве альтернативы, если у вас есть возможность сделать это, и это неЧтобы не мешать вашему пользовательскому интерфейсу, вы можете установить #contactArea равным position: absolute, чтобы он располагался над в верхней части текущего содержимого, а не надавливал на него вниз.

...