Форум

alex72bel · #31 (**permalink**) 16.01.2016, 10:10

Poznakomlus,Подскажите пожалуйста как привязать к оному скрипту так, чтобы блок, например #hid снизу, появлялся еще и #hid1 одновременно сверху ... Спасибо

RaLinski · #32 (**permalink**) 04.01.2017, 21:51

Сообщение от Poznakomlus

<style type="text/css">
      #hid {
        width: 50px;
        height: 50px;
        background: #FF0000;
        opacity: 0;
        position: fixed;
      }
      body {
        height: 1500px;
      }
    </style>
<body>
    <div id="hid"></div>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
    $(function () {
      var element = $("#hid"), display;
      $(window).scroll(function () {
        display = $(this).scrollTop() >= 200;
        display != element.css('opacity') && element.stop().animate({ 'opacity': display }, 500);
      });
    });
  </script>
</body>

рони,
bo ? , a ?

Здрасте.. Аж зарегился на радостях, нашол то что мне нужно.. Ребят я в коде не совсем. А может даже не вообще)) Прошу скажите пожалуйста а как вставить ссылку на изображение которое должно появлятся вместо красного квадратика.. ??? Куда только не пихал никак и все..

рони · #33 (**permalink**) 04.01.2017, 22:21

Сообщение от RaLinski

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

https://webref.ru/css/background-image

12345678 · #34 (**permalink**) 02.02.2017, 16:33

А как сделать скрытие, но плавное и с кнопочкой показать всё. Пример прикрепил, хотя он не очень удачный т.к. горизонтальное скрытие, да и плавность очень короткая и кнопки "показать всё" нет. Я нашёл этот пример на почтовике mail и привёл, дабы показать, какую плавную прозрачность я имею ввиду.

рони · #35 (**permalink**) 02.02.2017, 16:42

12345678,

12345678 · #36 (**permalink**) 03.02.2017, 11:57

Вот на этом скриншоте более показательно, что хотелось бы реализовать.

Как видно, последняя строчка полупрозрачная, что очень хорошо демонстрирует что там есть продолжение. Вероятность открытия полного списка статей и перехода за счёт такого подхода увеличивается.

рони · #37 (**permalink**) 03.02.2017, 12:07

12345678,
открывашка 231 со сменой текста на кнопке

HDN · #38 (**permalink**) 21.09.2017, 07:41

Всем здравствуйте!
Подскажите как бороться с такой ерундой: нужно чтобы при скроллинге страницы состоящей из div и 4 section находящихся во втором div верхнее меню из первого div исчезало при прокрутке на 4-ую section. Нашел скрипт, в отдельном тестовом документе работает, но не знаю как в скрипте задать высоту стр. в единицах wh. И еще само меню сразу исчезает при скролле, блок остается и исчезает в нужном месте, но меню (его текст) заменяется бегающими при скроллинге цифрами.

Что это за цифры и как их убрать?

Вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>

<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var bo = $(this).scrollTop();
var a = $("#menugl").css('opacity')
$("#menugl").html(bo);
if ( bo >= 1700 && a == 1) {$("#menugl").css("opacity", "0",500)};
if ( bo <= 1700 && a == 0) {$("#menugl").css("opacity", "1",500)};
})
})

</script>

</head>

<body>

<div class="glav">

<section id="c">

<ul id="menugl">

<li class=""> <a href="">11111</a> </li>
<li class=""> <a href="">22222</a> </li>
<li class=""> <a href="">33333</a> </li>

</ul>

</div>

<section class="odin">
</div>

<section class="dva">
</div>

</div>

</body>
</html>

стили

html, body, section, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0; border:0;outline:0; font-size:100%;vertical-align:baseline; background:transparent; }a{text-decoration:none;} .div{word-break:break-all;}#div{word-break:break-all;}
ul, li {list-style-type: none; margin:0;padding:0; border:0;outline:0;}

body
{
height:3000px;
}

.glav
{
height:300vh;
}

#menu
{
width:100vw;
height:100vh;
background:#3FF;
}

#menugl
{
position:fixed;
width:20vw;
height:20vh;
padding:5vh;
background:#66C;
opacity:1;
}

#menugl a:hover
{
color:#0C3;
}

.odin
{
width:100vw;
height:100vh;

}

.dva
{
width:100vw;
height:100vh;
background:#CF6;

}

Форум

Справочник

Discord чат

Курсы javascript