Что такое fixed Вконтакте

Use saved searches to filter your results more quickly

Cancel Create saved search

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window.

Reload to refresh your session.

VKFix Userscript for fixing VK social network

License

LazyTechwork/vkfix

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Switch branches/tags
Branches Tags
Could not load branches
Nothing to show
Could not load tags

Nothing to show

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Cancel Create

• Local
• Codespaces

HTTPS GitHub CLI
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more about the CLI.

Как сделать некликабельную аватарку ВК | 2019 [FIXED]

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

Latest commit message
Commit time

README.md

VK Fix — скрипт, пришедший на замену VK Opt. Мы исправляем ВКонтакте в лучшую сторону. Мы сделали VK Fix максимально гибким, любой модуль можно включить или выключить.

Инструкция по запуску в режиме разработки

В TamperMonkey создаём новый скрипт, пихаем туда следующий код.

Вместо C:/Work/Development/vkfix вставляем свой путь до этого проекта. Далее запускаем npm run build и всё готово, при новом билде скрипт будет автоматически браться из файла.

Не забудьте дать TamperMonkey разрешение на работу с локальными файлами, это делается в настройках расширений Chrome.

Для автоматической сборки при изменениях используйте npm start

Источник: github.com

Три варианта фиксации элемента на сайте на CSS/jQuery

Фиксирование элементов сейчас пользуется большой популярностью. Так, например, «Яндекс» или социальная сеть «ВКонтакте» (на момент написания статьи) фиксируют свое меню и поиск при прокрутке страницы. Вполне хорошее решение, позволяющее ограничить пользователя от лишних действий в получении доступа к нужному функционалу сайта и позволяющее сделать некий акцент на важных элементах.

VK App 2.1 (fixed)

Зафиксировать элемент на сайте можно несколькими способами, каждый из них хорош в своем случае.

Фиксация элемента на сайте на CSS

Самый простой вариант – это фиксация элемента на чистом CSS. Все, что вам нужно, это добавить следующие стили к элементу:

position: fixed; top: 0; left: 0; right: 0;

Положение в таком случае будет верхнее, по всей ширине экрана. Вариант отлично подходит для элементов, которые изначально находятся в самом верху (меню и поиск).

Если хотите поиграть с положением – измените значение свойств left, top, right и bottom соответственно.

Минусы – не подходит для элементов, находящихся ниже верхней границы сайта.

Здесь на помощь к нам приходит другое значение position – sticky. Оно фиксирует тот или иной элемент только в рамках первого родительского контейнера. Фиксация элемента при этом начнется тогда, когда верхняя граница элемента совпадет с верхней частью окна браузера, и завершится при достижении элементом конца родителя, при этом другие элементы (и даже окружаемый текст) не смещаются, что очень удобно в отдельно взятых случаях. Пример использования:

position: sticky; top: 10px;

Эти стили вы присваиваете тому элементу, который хотите зафиксировать. Свойство top со значением «10px» говорит здесь о том, что при фиксации элемента необходимо сделать отступ от верхней границы в 10 пикселей.

Фиксация элемента на сайте при прокрутке страницы на jQuery

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

$(document).ready(function() { var element = $(«.fixed_block»); var height_el = element.offset().top; $(«.fixed_block_position»).css({ «width»: element.outerWidth(), «height»: element.outerHeight() >); $(window).scroll(function() { if($(window).scrollTop() > height_el) { element.addClass(«fixed»); > else { element.removeClass(«fixed»); > >); >);

«.fixed_block» здесь – это класс элемента, который нужно зафиксировать при прокрутке, а «.fixed_block_position» — класс обертки.

.fixed { position: fixed; z-index: 99; top: 0; >

Их вы вставляете без изменений. Отличный вариант для фиксации рекламных блоков или других элементов находящихся не в первых рядах.

Фиксация элемента на сайте при прокрутке страницы с остановкой в нужном месте на jQuery

Этот вариант является доработкой вышеуказанного способа. Я много видел сайтов, где в сайдбаре (боковой колонке сайта) фиксируются различные рекламные блоки. Все бы ничего, но при прокрутке страницы до самого низа такие блоки перекрывают футер (низ сайта) и зачастую препятствуют получению немаловажной информации или навигации в нем.

Чтобы исправить этот конфуз и удержать блок при достижении указанной области, и существует этот вариант.

$(document).ready(function() { var element = $(«.fixed_block»); var height_el = element.offset().top; var element_stop = $(«.fixed_block_stop»); var height_el_stop = element_stop.offset().top; $(«.fixed_block_position»).css({ «width»: element.outerWidth(), «height»: element.outerHeight() >); $(window).scroll(function() { if($(window).scrollTop() > height_el_stop — element.outerHeight() — 20) { element.css({ «top»: element.offset().top, «left»: element.offset().left >).removeClass(«fixed»).addClass(«absolute»); > else { if($(window).scrollTop() > height_el) { element.addClass(«fixed»).removeClass(«absolute»).attr(«style», «»); > else { element.removeClass(«fixed absolute»).attr(«style», «»); > > >); >);

Ну и те же стили из второго варианта с небольшим дополнением:

.fixed { position: fixed; z-index: 99; top: 0; > .absolute { position: absolute; z-index: 99; >

На что здесь стоить обратить внимание?

«.fixed_block» – это элемент, который мы фиксируем при прокрутке. «.fixed_block_position» — класс обертки, а «.fixed_block_stop» – это элемент (граница), достигнув которую элемент остановит свое движение (фиксацию).

Источник: www.pandoge.com

Как работает CSS Position — объяснение с примерами кода

Сегодня мы узнаем все, что вам нужно знать о свойстве CSS Position. Объясняем всё на наглядных примерах с кодом.

Это — перевод оригинальной статьи на freeCodeCamp от автора Joy Shaheb.

Ещё у нас есть видеоверсия урока от автора (осторожно, английский язык):

Что такое свойство Position в CSS

Если вы хотите создавать сайты, которые выглядят красиво и уникально, вам обязательно нужно научиться использовать свойство CSS Position. Давайте посмотрим, как это работает.

Используя Flexbox или Grid, вы можете сделать симметричный сайт, к примеру, как этот:

Используя свойство Position, вы можете сделать асимметричный сайт, как этот:

Дело в том, что с помощью Flexbox и Grid вы не можете разместить содержимое сайта в любом месте. Вы ограничены осями X и Y.

Посмотрите на этот рисунок, чтобы понять, что имеется в виду:

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

Но, используя свойство Position, вы cможете разместить блоки сайта в любом месте, отделив каждый элемент от других.

Используя Position, вы можете размещать свои блоки где угодно.

Вот еще один пример сайта, который вы можете сделать, используя свойство Position:

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

Настройка проекта

Для этого проекта вы можете использовать любой редактор кода, в котором установлен плагин emmet. Я собираюсь использовать CodePen.io.

HTML

Внутри тега body напишите этот код:

CSS

Очистите настройки браузера по умолчанию и добавьте этот CSS:

Стилизацию класса box-1 сделаем такой:

.box-1

Свойство position, которое мы будем изучать, имеет 5 значений:

1. relative;
2. absolute;
3. static;
4. fixed;
5. sticky.

Чтобы переместить наш блок, мы будем использовать 4 параметра:

• Top, Bottom;
• Left, Right.

Что такое Static Position в CSS

Static не имеет никакого применения. Static — это значение по умолчанию для каждого блока.

Что такое Relative и Absolute Positions в CSS

И Relative, и Absolute работают одинаково, разница между ними заключается только в использовании классов.

Relative используется только для родительских классов.

Absolute используется только для дочерних классов.

Давайте рассмотрим два примера, чтобы понять разницу.

Сперва поэкспериментируем с Relative. Напишите этот код:

.box-1< /* Other codes are here*/ position: relative; left: 100px; >

Вот результат, который вы получите: