X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Скользящий блок на javascript (маалюсенькая помощь)
zakaznik
zakaznik
Topic Starter сообщение 12.2.2013, 10:06; Ответить: zakaznik
Сообщение #1


↑↑↑ Цель ↑↑↑
******

Группа: Active User
Сообщений: 1842
Регистрация: 17.3.2010
Поблагодарили: 394 раза
Репутация:   51  


Ребята, помогите, пожалуйста...

хочу привязать меню к левому краю, т.е. чтобы при прокрутке страницы пользователь по всей длинне страницы видел это меню.

имеется скрипт, который делает меню скользящим:

Развернуть/Свернуть
<script type="text/javascript">
$(function() {
var TopOld = $("#fixed").offset().top;
var MaxBottom = $("#dashboard").offset().top - parseInt($("#fixed").height()); //&&
var Delta = 19; //начало движения не доходя до верха;
var Busy = false; //Занят обработкой;



$(window).scroll(function() {

if ( Busy ) { return false;}

Busy = true; // Занят;
var ThisTop = $("#fixed").offset().top;
var Scroll = $(window).scrollTop();

if (Scroll > (TopOld-Delta) && ThisTop < MaxBottom ){
$("#fixed").addClass('Fixed');
} else $("#fixed").removeClass('Fixed');

if (Scroll > MaxBottom) $("#fixed").removeClass('Fixed');

Busy = false; //Освободился

});
});
</script>


fixed - это id дива, в котором находится меню
dashboard - это id дива, который ограничивает скольжение fixed, т.е. fixed будет скользить только до дива dashboard.

В моем случае при достижении dashboard див fixed и меню исчезает... (т.е. открепляется и опять вверху страницы становится)....
как сделать, чтобы при достижении dashboard див fixed просто фиксировался, оставался на месте? Т.е., чтобы меню не исчезало, а просто останавливалось?

P.S. Для работы так же подключаем стили на страничке:
Развернуть/Свернуть
<style>




#fixed {

position: absolute;
z-index:1000;

}

#fixed.Fixed {
position: fixed;
z-index:1000;
top:19px;
transition-property:top;
-webkit-transition-property:top;
-moz-transition-property:top;
-o-transition-property:top;
-ms-transition-property:top;

transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
-ms-transition-duration: 0.4s; /* IE9+ */
}</style>



Сообщение отредактировал zakaznik - 12.2.2013, 10:13


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Ortero
Ortero
сообщение 12.2.2013, 10:40; Ответить: Ortero
Сообщение #2


\m/_ _\m/
******

Группа: Active User
Сообщений: 1891
Регистрация: 23.2.2012
Поблагодарили: 840 раз
Репутация:   99  


Как вариант можете попробовать скрипт из второго сообщения темы http://www.maultalk.com/topic132958.html


Сообщение отредактировал Ortero - 12.2.2013, 10:50


--------------------
Бегет - просто хороший хостинг, который еще и ssl-сертификат бесплатно дает.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
zakaznik
zakaznik
Topic Starter сообщение 12.2.2013, 10:54; Ответить: zakaznik
Сообщение #3


↑↑↑ Цель ↑↑↑
******

Группа: Active User
Сообщений: 1842
Регистрация: 17.3.2010
Поблагодарили: 394 раза
Репутация:   51  


Ortero, нет он не подходит, это и есть измененный скрипт моего варианта... в вашем примере есть большой минус....у него нет ограничителя... страница листается, листается, листается вниз


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tszyan
tszyan
сообщение 12.2.2013, 13:01; Ответить: tszyan
Сообщение #4


Участник
***

Группа: User
Сообщений: 207
Регистрация: 28.1.2013
Из: Москва
Поблагодарили: 110 раз
Репутация:   27  


Скрипт страшен и глючен, но если хотите исправить именно его, то примерно так:
<script type="text/javascript">
    $(function() {
        var TopOld = $("#fixed").offset().top;
        var MaxBottom = $("#dashboard").offset().top - parseInt($("#fixed").height());
        var Delta = 19;
        var Busy = false;

        $(window).scroll(function() {

            if (Busy)
                return false;

            Busy = true;
            var ThisTop = $("#fixed").offset().top;
            var Scroll = $(window).scrollTop();

            if (Scroll > (TopOld - Delta) && ThisTop < MaxBottom)
                $("#fixed").addClass('Fixed');
            else
                $("#fixed").removeClass('Fixed').css({top: ThisTop});

            if (Scroll < MaxBottom)
                $("#fixed").css({top: 0});
                    
            if (Scroll > MaxBottom)
                $("#fixed").removeClass('Fixed');
                    
            Busy = false;

        });
    });
</script>


Сообщение отредактировал tszyan - 12.2.2013, 13:03
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
zakaznik
zakaznik
Topic Starter сообщение 12.2.2013, 14:17; Ответить: zakaznik
Сообщение #5


↑↑↑ Цель ↑↑↑
******

Группа: Active User
Сообщений: 1842
Регистрация: 17.3.2010
Поблагодарили: 394 раза
Репутация:   51  


tszyan, отписал в ЛС, у вас некий недочет имеется)


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tszyan
tszyan
сообщение 12.2.2013, 14:31; Ответить: tszyan
Сообщение #6


Участник
***

Группа: User
Сообщений: 207
Регистрация: 28.1.2013
Из: Москва
Поблагодарили: 110 раз
Репутация:   27  


(zakaznik @ 12.2.2013, 14:17) *
tszyan, отписал в ЛС, у вас некий недочет имеется)

Точнее у Вас в посте не приведена верстка. А гадать что у Вас в ней — дело неблагодарное. А получить что-то универсальное из этого скрипта — трудно.

Сообщение отредактировал tszyan - 12.2.2013, 14:33


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
zakaznik
zakaznik
Topic Starter сообщение 13.2.2013, 7:18; Ответить: zakaznik
Сообщение #7


↑↑↑ Цель ↑↑↑
******

Группа: Active User
Сообщений: 1842
Регистрация: 17.3.2010
Поблагодарили: 394 раза
Репутация:   51  


Проблема решена


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 13.2.2013, 12:55; Ответить: falken
Сообщение #8


online
*******

Группа: Super Moderator
Сообщений: 3816
Регистрация: 23.3.2011
Поблагодарили: 4171 раз
Репутация:   371  


Закрыто по просьбе ТС.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


--------------------
здесь может быть ваша ссылка
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Веб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
20 qpPeW 5726 30.4.2018, 15:34
автор: koroluk1990
Открытая тема (нет новых ответов) Нужна помощь в поиске плагина для WP
Для создания каталога
3 Frankie 839 25.4.2018, 21:20
автор: Frankie
Открытая тема (нет новых ответов) Скорая помощь для ваших сайтов - Wordpress, DLE, Joomla, Drupal
Любые виды работ, профессионально, оперативно, не дорого.
15 wturm 3752 20.4.2018, 14:34
автор: Black_Mag
Открытая тема (нет новых ответов) Первая Компьютерная Помощь – Платим за лиды по ремонту (1000р/лид)
0 MrCrutch 447 19.4.2018, 12:27
автор: MrCrutch
Открытая тема (нет новых ответов) Сайт "Компьютерная помощь и ремонт компьютеров на дому в Новосибирске"
1 maxmer 667 2.4.2018, 10:06
автор: maxmer


 



RSS Текстовая версия Сейчас: 22.5.2018, 18:17
Дизайн