Есть ли способ заставить элемент фиксированной позиции перестать двигаться после изменения размера окна на определенную величину? - PullRequest
Новая
       1

Есть ли способ заставить элемент фиксированной позиции перестать двигаться после изменения размера окна на определенную величину?

1 голос
/ 15 ноября 2011

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

Я пытаюсь использовать jquery и $ (window) .resize и могу остановить перемещение элемента внутрь после определенной точки, но он не прикрепляется, если окно масштабируется больше.

Кроме того, эффект не очень плавный и довольно резкий.

Любые другие решения или идеи будут с благодарностью!

http://jsbin.com/azanif/5

$(window).resize(function(){
  var windowWidth = $(window).width();
  if (windowWidth < 1200) {
    $('#test').css('left', '1100px');
  }
  else {
    $('#test').css('right', '55px');
  }
});

Ответы [ 3 ]

3 голосов
/ 15 ноября 2011

Для этого типа функций вы можете использовать Media Query

напишите как: 

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1100px) {
  #test {
    left:600px;
  }
}

Прочитайте эту статью больше

http://css -tricks.com / 6731-css-media-query / ,

http://css -tricks.com / 6206-разрешение конкретных-таблиц стилей /

0 голосов
/ 15 ноября 2011

Он сохраняет оба расстояния, левое и правое, как только вы их назначите.
Установите влево на авто, когда вы установите правильное расстояние, и оно должно работать 

 if (windowWidth < 1200) {
    $('#test').css('left', '1100px');
  }
  else {
    $('#test').css('right', '55px');
    $('#test').css('left', 'auto');
  }

РЕДАКТИРОВАТЬ (добавлено анонимным пользователем.)

Stratton совершенно прав, вы присваиваете значение «left» и никогда не переназначаете его на auto. если вы сделаете это с помощью оператора else, у вас все получится. Попробуйте использовать этот код, и вы получите эффект, будто он движется только через определенную точку. 

$(window).resize(function(){
  var windowWidth = $(window).width();
  $("#test").html(windowWidth);//Just to see in real time what's the window with
  if (windowWidth < 1200) {
    $('#test').css('left', '1020px');
  }
  else {
    $('#test').css('right', '50px');
    $('#test').css('left', 'auto');
  }
});

От производительности зависит многое от того, какой компьютер и браузер вы используете, например, от chrome у меня компьютер выглядит великолепно, но не в опере. Это может быть потому, что (например) Opera запускает событие только тогда, когда вы прекращаете изменять его размер ( эта статья объясняет это немного).

0 голосов
/ 15 ноября 2011

Используйте абсолютное, а не фиксированное позиционирование. Поместите div обертки с относительным позиционированием, затем задайте для него значение минимальной ширины. Поместите панель навигации внутри обертки с абсолютным позиционированием.

...