• 締切済み

指定要素をスクロール時に非表示

JSで、divで囲ったある指定要素をスクロールしたら非表示にしたいのですが、 当方jsにまったく疎く、書き方がわかりません。 どなたかお助けいただけますと助かります。 サンプルなのですが、HTMLファイルのコードは以下になります。 <div id="subNav"> <ul class="fixed"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </div>

みんなの回答

回答No.1

<html> <head> <meta http-equiv="Content-Type" content="Text/HTML; charset=Shift_JIS"> <title>test</title> </head> <body bgcolor="#8f9fff" text="#000000" link="#2f2fff" vlink="#d700d7" alink="#00ffff" > <script type="text/javascript"> <!-- function ScrollEvent( ){ var wv; wv = document.getElementById("subNav"); wv.style.display='none'; } window.onscroll = ScrollEvent; // スクロール・イベントに「ScrollEvent( )」関数を設定。 --> </script> <div id="subNav"> <ul class="fixed"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </div> <!-- 下記 table で「height="100%"」 を表示させる事で、表示が少ない行数でもスクロール可能にしている。 --> <table border=0 align="center" width="100%" height="100%"><tr><td> </td></tr></table> </body> </html>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 縦スクロールの表示位置によるDOM

    縦長のHTMLコンテンツで下にスクロールした時にそのスクロール位置によって 目次のリンクにselectedクラスをDOMで追加し、現在どの部分を表示しているのかを視覚的にわかりやすくしたいのですが、 方法がわからず悩んでおります。そもそもHTMLの構造的に可能どうかもわからない素人ですが、どなたかご教授頂きたいと存じます。 現在のHTMLの構造は、 コンテンツのHTMLの前に目次の記述があり、その目次部分はposition:fixedで常に見える位置に表示してあります。 構造を簡単にしますと以下のようになっております。 <!-- 目次 START --> <div id="toc"> <ul class="toc"> <li class="toc_lebel_1"> <a href="#見出し1"> class="toc">見出し1</a> </li> <li class="toc_lebel_1"> <a href="#見出し2"> class="toc">見出し2</a> </li> <li class="toc_lebel_1"> <a href="#見出し3"> class="toc">見出し3</a> </li> </ul> </div> <!-- 目次 END --> <!-- コンテンツ START --> <h1> <a name="見出し1" id="見出し1">見出し1</a> </h1> ・・・ <h2> <a name="見出し2" id="見出し2">見出し2</a> </h2> ・・・ <h2> <a name="見出し3" id="見出し3">見出し3</a> </h2> ・・・ <!-- コンテンツ END --> このページはかなり縦長のページになっており、下にスクロールした際に現在表示している位置（例えば、見出し1と見出し2の間を表示している場合の位置）によって 目次の該当箇所の<a>タグにselectedのようなクラスを追加したいです。 よろしくお願いします。

  • スムーズスクロールとfleXcrollの併用

    よろしくお願い致します。 jQueryを使用して、「overflow: auto」を指定している要素内でスムーズスクロール出来る方法を探しており、以下のようなコードを見つけました。 $(document).ready(function(){ var box = $('#contents'); $(document).click(function(event){ var obj = $(event.target); var anchor = obj.filter('a[href*="#"]'); if (!anchor[0]) anchor = obj.parents('a[href*="#"]'); if (anchor[0]){ var target = $(anchor[0].hash, box); if (target[0]){ var scrollTop = box.scrollTop(); var dist1 = box.prop('scrollHeight') - box.prop('clientHeight') - scrollTop; var dist2 = target.position().top - box.position().top; box.animate({ scrollTop: scrollTop + Math.min(dist1, dist2)}); return false; } } return true; }); }); ↑このコードで「overflow:auto;」を指定している要素内でスムーズスクロールが出来るようになったのですが、スクロールバーを装飾できる「fleXcroll（http://shanabrian.com/web/library/flexcroll.php）」プラグインと併用すると、スムーズスクロールが効かなくなってしまいます。 「fleXcroll」のコードは「http://www.hesido.com/web/flexcroll.js」になる（記述が長くここには書ききれませんでした）のですが、薄識のため何処に問題があるのか分からない状態です。 ちなみにHTMLは、下記のようなコードで使用しています。 <div id="navi"> 　<ul> 　　<li><a href="#A">divAへ移動</a></li> 　　<li><a href="#B">divBへ移動</a></li> 　　<li><a href="#C">divCへ移動</a></li> 　　<li><a href="#D">divDへ移動</a></li> 　　<li><a href="#E">divEへ移動</a></li> 　</ul> </div> <div id="hoge" style="height:500px; overflow:auto;"> 　<div id="A">divAの内容</div> 　<div id="B">divBの内容</div> 　<div id="C">divCの内容</div> 　<div id="D">divDの内容</div> 　<div id="E">divEの内容</div> </div> 分かりにくい説明で恐れ入ります。 補足説明致しますので、お分かりになる方がいらっしゃいましたら、どうかご教授下さいますようお願い致します。

  • ヘッダーのa要素のメニューが消える

    ヘッダーに書いてあるテキストのコメントが消えてしまいます。 ご教示お願いします。 ここからHTML： <!DOCTYPE html> <html lang="ja"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <head> <script src="code.jquery.com_jquery-3.7.0.min.js"></script> </head> ここら辺から書いてあるa要素のコメントが消えてしまいます。 <body> <header class="header"> <nav> <ul> <li><a href="/index.html" id="link_sample">ABOUT</a</li> <li><a href="#works" id="link_sample">WORKS</a></li> <li><a href="#gallery" id="link_sample">GALLERY</a></li> <li><a href="#service" id="link_sample">SERVICE</a></li> </ul> </nav> </header> ここまで： <ul> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> </ul> <script>const animations = document.querySelectorAll('.js-scroll-animation'); function toggle() { animations.forEach((animation) => { //ウィンドウの高さを取得 const height = window.innerHeight; //スクロール量を取得 const scroll = window.scrollY; //要素の位置を取得 const target = scroll + animation.getBoundingClientRect().top; //スクロール位置を判定して要素にクラスを付与 if (scroll > target - height / 1.5) { animation.classList.add('is-active'); } }); } //ロード時に発火 window.addEventListener('load', toggle); //スクロール時に発火 window.addEventListener('scroll', toggle);</script> </body> </html> ここからCSS： @charset "utf-8"; .header { background-color: lightgray; color: white; } #link_sample ul { display: inline; justify-content: center; } #link_sample li { font-size: 32px; list-style-type: disc; } #link_sample a { padding: 5px; text-align: center; } ul{ display: flex; flex-wrap: wrap; } li{ width: 50%; padding: 20px; box-sizing: border-box; justify-content: space-between; flex-wrap: wrap; /* 透過・非表示 */ opacity: 0; visibility: hidden; /* 要素の位置指定・アニメーション */ translate: 0 20px; transition: 1s; } img{ width: 40%; height: auto; } /* クラス付与で表示する */ .is-active{ opacity: 1; visibility: visible; translate: 0 0; }

    • ベストアンサー
    • CSS
  • jQuery　1つの要素を複数箇所に表示したい

    いつもこちらでお世話になっています。 jQuery初心者です。 また、お知恵を拝借したく、お願いします。 以下のようなHTMLがあります。 やりたい事は <div class="info">の中の要素全て(ul以下)を <div class="hoge">の中にも表示したいのです。 ですが、以下のスクリプトのように書くと、 今度は、<div class="info">の中の要素が表示されなくなり、 <div class="hoge">の中に表示されました。 <div class="info">の中の要素は 表示のままで、重複して<div class="hoge">の中に 表示させる方法ってありますか？ ▼HTML ------------------- <div class="hoge"></div> ～別要素(省略)～ <div class="info"> 　<ul> 　　<li>項目1</li> 　　<li>項目2</li> 　</ul> </div> ▼Script ------------------- var contents = $("div.info ul"); $("div.hoge").html(contents); ------------------- 多分、基本的な事なのかもですが、 1つの要素を重複して表示できる方法がありましたら 詳しい方、ご教授ください。 どうぞ宜しくお願いいたします。

    • ベストアンサー
    • AJAX
  • オンマウス時の画像表示がおかしい

    作成中のホームページのボタン表示を 左側に縦に10個ほどな食べ CSSを使用してマウスを乗せた時にJPG画像を切り替えるように していますが、マウスを乗せた時に 本来表示されないはずの画像ボタンが一瞬表示されてしまいます。 トップページボタンの上にマウスを乗せたあとマウスをサイトマップボタンの 上に移動するとまたトップページの画像が一瞬表示されてしまう どうやら直前に表示した画像が表示されているみたいです どうしたらこの不具合が解消できるのでしょうか？ どなたかお力添えお願いいたします HTML <div id="navibar"> <ul> <li> <div id="btn00"><a href="index.html">Top</a></div> </li> <li> <div id="btn01"><a href="contents.html">システム</a></div> </li> <li> <div id="btn02"><a href="ryoukin.html">料金</a></div> </li> <li> <div id="btn03"><a href="shiryou.html">資料請求</a></div> </li> <li> <div id="btn04"><a href="privacy.html">プライバシーポリシー</a></div> </li> <li> <div id="btn05"><a href="hyouji.html">会社概要</a></div> </li> <li> <div id="btn06"><a href="sample.html">サンプル</a></div> </li> <li> <div id="btn07"><a href="merit.html">メリット</a></div> </li> <li> <div id="btn08"><a href="yougo.html">専門用語</a></div> </li> <li> <div id="btn09"><a href="syoukai.html">紹介制度</a></div> </li> <li> <div id="btn10"><a href="map.html">サイトマップ</a></div> </li> </ul> </div> CSS #navibar #btn00 a { height: 28px; width: 180px; display: block; text-indent: -9999px; background-image: url(btntop.jpg); margin-bottom: 1px; }

    • ベストアンサー
    • HTML
  • position fixed内でスクロールさせたい

    css position fixed内でスクロールさせることは可能ですか？ 下記のサイトのドロワーメニューのようにしたいです。 //www.toei-eigamura.com/edosakaba/ 下記のようにしてもうまくいきませんでした。 ・html <nav> <div id="nav__drawermenu-wrap"> <ul> <li> <a class='top-header__social-btn symbol animation-hover action-hover' href="https://plus.google.com/share?url=http:///index.html" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe039;'></a> <a class='top-header__social-btn symbol animation-hover action-hover' href="http://www.facebook.com/share.php?u=http:///index.html" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe027;'></a> <a class='top-header__social-btn symbol animation-hover action-hover' href="http://twitter.com/share?url=</a> </li> <li><a class="link-block" href="#js-about-me"><span class="gotootherpage"><img class="top-gnav__link-sixth__goto-other-page" src="img/common-img/goto-other-page.svg" alt="goto-other-page-image"></span>ABOUTME</a></li> <li><a class="link-block" href="#js-gallary">GALLARY</a></li> <li><a class="link-block" href="#js-gmap">MAP</a></li> <li><a class="link-block" href="#js-contact">CONTACT</a></li> <li><a class="link-block" href="http:///index.html">TOP</a></li> <li><a class="link-block" href="http:///index.html">BLOG</a></li> </ul> </div> </nav> ・ｃｓｓ nav { overflow: auto; } [id="drawermenu"] ul { z-index: 300; width: 100%; height: 100% position: fixed; top: 0; padding-top: 2.8rem; text-align: center; cursor: pointer; margin-left: -100%; transition-propety:all; transition-duration:1s; }

    • ベストアンサー
    • CSS
  • jqueryで特定の要素をdivで囲う

    jqueryを使い、HTMLの特定の要素をdivで囲いたいと思っています。 元のHTMLのソースは、 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> ========= このようになっております。 上記のソースを、以下のように２か所<div class="wrap">で<ul class="spAcodNav">を囲いたいと思っています。 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 mb20">●●●</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> </div> ========= jqueryでwrapAllなどを使って試しているのですが、うまいいかず、 お分かりいただける方いらっしゃいましたらご教授いただけますと幸いです。 よろしくお願い致します。

  • javascriptでCSVを読み込み表示する方法を探しています。

    javascriptでCSVを読み込み表示する方法を探しています。 <div id="hoge"> <ul class="hogehoge"> <li><a href="1行目の1つ目のデータ">1行目の2つ目のデータ</a></li> <li><a href="2行目の1つ目のデータ">2行目の2つ目のデータ</a></li> ・ ・ ・ </ul> </div> で、ulに囲まれた部分をjavascriptで生成させたいのですが・・・ （ulのところのCSS指定は、idではなく、classにしたいです） よろしくお願いいたします。

  • 【CSS】li要素をfloatした際のブラウザ表示

    はじめまして。 現在CSSでwebサイトを作成しています。 ナビゲーションにli要素を使用し、CSSで横並びになるようfloatさせているのですが、firefox・Safariでの表示がずれてしまいます。 思いつく限り検索して、幅の調整やposition関連、DTD変更なども試してみたのですが全く原因がわからず、お手上げ状態です。 DTD変更はこちらのサイト(http://2xup.org/log/2007/07/27-2111)を参考に、HTML 4.01 Transitional→XHTML 1.0 Transitionalを試してみました。 お手数おかけしますが、どなたかご教授お願いします。 ■参考 【HTML】 <div id="wrapper"> <div id="header" class="clearfix"> <h1>タイトル</h1> <ul id="menu"> <li>TOP</li> <li><a href="#">NEWS</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">BBS</a></li> <li><a href="#">LINK</a></li> </ul> </div> </div> 【CSS】 #wrapper { margin:0 auto; padding:0; width:750px; } #header { background:url(image/bgtop01.gif) no-repeat; height:125px; } #header h1,li { float:left; text-align:center; } #header h1 { width:200px; margin:50px 25px 0 50px; background:#fc0; } #menu { width:425px; } ul#menu li { width:85px; margin-top:50px; background:#ffc; } .clearfix { min-height:1% } .clearfix:after { clear:both; display:block; visibility:hidden; height:0px; content: "."; } * HTML .clearfix { height:1% } 【サンプルサイト】 http://www.memorialhall.net/ky/index_sample.php どうぞよろしくお願いします。

    • ベストアンサー
    • CSS
  • jquery tab要素に文字列追加

    jqueryのタブ要素にinnerhtmlで文字列を挿入したいのですが、なぜかどのような文字列を挿入しても 先頭に"undefined"の文字が挿入されてしまいます。 この文字列が入らないようにするにはどのようなコードを書く必要があるのでしょうか？ ご教授お願いします。 コード例は下に記載させて頂きました。 <div style='clear:both;' id="tabdemo1"> <ul> <li><a href="#ex1">ex1</a></li> <li><a href="#ex2">ex2</a></li> </ul> <div id="ex1"> </div> <div id="ex2"> </div> </div> var html; html="Hello world"; document.getElementById("ex1").innerHTML += html;

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する