Javascript-форум - Появление/исчезновение элемента при прокрутке страницы JQuery

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Появление/исчезновение элемента при прокрутке страницы JQuery (https://javascript.ru/forum/misc/44239-poyavlenie-ischeznovenie-ehlementa-pri-prokrutke-stranicy-jquery.html)

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

Цитата:

Сообщение от Poznakomlus (Сообщение 291802)

<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 ?

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

Цитата:

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

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

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

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

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

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

Всем здравствуйте!
Подскажите как бороться с такой ерундой: нужно чтобы при скроллинге страницы состоящей из 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;

}