cssのtranslateYを変える方法

このQ&Aのポイント
  • jqueryを使用して、cssのtranslateYを変更する方法について知りたいです。
  • 問題の箇所は、$('#tableLayout table thead').css('transform', 'translateY(' + scrollTop - offsetTop + 'px)');の部分です。
  • 要件としては、scrollTop - offsetTopの値をtranslateYに代入することです。
回答を見る
  • ベストアンサー

cssのtranslateYを変えたい

知識のある方、教えていただきたいです。 やりたいことは、jqueryでtranslateYにscrollTop - offsetTopを代入するということです。何が間違っているのでしょうか。 $('#tableLayout table thead').css('transform', 'translateY(' + scrollTop - offsetTop + 'px)'); headerFix(); function headerFix(){ var $header = $('#tableLayout thead'), offsetTop = $header.offset().top, windowHeight = $(window).height(); $(window).on('load scroll orientationchange resize' , function(){ var scrollTop = $(window).scrollTop(); if (scrollTop >= offsetTop){ $('#tableLayout table thead').css('transform', 'translateY(' + scrollTop - offsetTop + 'px)'); }else{ }; }); }

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

この後実験してみますが、 原因は「マイナス」だと思います。 $('#tableLayout table thead').css('transform', 'translateY(' + (scrollTop - offsetTop) + 'px)'); こんだけで治る気がしますが。この後こちらでも試します。

yukiponta
質問者

お礼

治りました!早々にありがとうございました!!!!

関連するQ&A

  • 時間差で要素が出てくるエフェクトを導入

    http://ziyudom.com/js-delay/を参考に時間差で要素が出てくるエフェクトを導入したかったのですが、うまくいきません。 いっぺんに時間差なく行われてしまいます。 一つ終わって次という形にしたいです。 ないしはほんの少し差をつけたいです。 スクロールがカキはできないのですかね。うまく再現できていませんがソースはわかると思います。スクロールの仕方があれば教えてください。 http://codepen.io/anon/pen/WGqjZZ ・css .js-translate3d-lower-right,.js-translate3d-lower-right-2,.js-translate3d-lower-right-3 { opacity : 0;/* 対象の要素の初期の不透明度 */ transform: translate3d(-1rem,-2rem,-1rem); /*transform : translate(5rem, 0);横からスライド*/ transition : all 500ms; } ・動くがいっぺんに動いてしまう。 var $deferredAnim = $.Deferred( function( deferredAnim ){ //thenでファンクション名を繋げる deferredAnim.then(anim_01) .then(anim_02) .then(anim_03) }); //実行 $deferredAnim.resolve(); function anim_01 (){ $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); }); } function anim_02 (){ $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right-2').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); }); } function anim_03 (){ $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right-3').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); }); } ・こちらだと動かない最後の}にエラーと出る $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); } function anim_02 (){ $(window).scroll(function (){ $('.js-translate3d-lower-right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); } function anim_03 (){ $(window).scroll(function (){ $('.js-translate3d-lower-right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); }

  • jqueryでscrollTopの値をとりたい

    貴重な場をお借りして、ぜひとも教えていただきたいことがございます。 今、スクロールをすると要素がフェイドインするようなjqueryを書いています。 下記をご覧ください。 $(window).on("scroll", function(){}の中に入っているscrollTop,scrollVolを このfunctionの外でも使用したいのですが、方法はございますでしょうか。 つまり、if文のscrollVolに値を入れたいのですがunderfindとなってしまいます。 $(window).on("scroll", function(){}の中でif文を実行すれば取得はもちろんできるのですが、この外側で使用したい場合どうすればよろしいでしょうか。 お手数ですが、お力を貸していただけませんでしょうか。 よろしくお願いいたします。 function paralax(){ var target = $('#sec1'); var targetOffset = target.offset().top; target.css('display','none'); var scrollTop , windowHeight , scrollVol; windowHeight = $(window).height(); $(window).on("scroll", function(){ scrollTop = $(window).scrollTop(); scrollVol = scrollTop + windowHeight; }); if(targetOffset <= scrollVol){ target.fadeTo(400 , 1); } }

  • 一秒後に実行するようにしたところ全く動かない

    一秒後に実行するようにしたところ全く動かなくなってしまいました。 ・これは動く //fadein-from-スクロール350後に実行 $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); }); ・これが動かない //一秒後に実行 // setTimeout(function(){ // $(this).addClass('scrollin'); // },1000); //fadein-from-スクロール350後に実行 $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right--delay-one-s').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ //一秒後に実行 setTimeout(function(){ $(this).addClass('scrollin'); },1000); } }); }); }); ・下記に間違いがあるのでしょうか? if (scroll > elemPos - windowHeight + 350){ //一秒後に実行 setTimeout(function(){ $(this).addClass('scrollin'); },1000); }

  • jqueryについて教えて下さい。

    貴重な場をお借りして質問させていただきます。 知識のある方、お力を貸して下さい。 今勉強の為プラグインなどを制作しておりまして、 一定の値までスクロールするとコンテンツをフェイドインさせるような スクリプトを書いています。 ただ、別ページに遷移して戻ってくると、opacityが0となり真っ白な状態と なってしまいます。 それを解決するためにcookieなどを使ったりはして出来たのですが、 スマートではないので、cookieを使用せずに出来れば嬉しいのですが、 良い方法ございましたら、ご教示いただけないでしょうか。 宜しくお願い致します。 <script type="text/javascript"> $(function(){ $('#contents1').locationFade(); $('#contents2').locationFade(); $('#contents3').locationFade(); $('#contents4').locationFade(); }) </script> (function($) { $.fn.locationFade = function(options){ var defaults = { fadeSpeed:500, location:300, easing:'swing' } var opts = $.extend(defaults , options); var windowHeight = $(window).height(); var target = $(this); target.css('opacity',0);//最初に透明度0とする $(window).on('load' , function(){ //画像が読み込まれた後でないとtargetOffsetがきちんと取れない為 target.each(function(){ var targetOffset = target.offset().top; if(windowHeight > targetOffset){       //最初から要素がwindowサイズ内に表示されているなら即fadeIn target.stop().fadeTo(opts.fadeSpeed , 1 , opts.easing) } $(window).on("scroll", function(){ var scrollTop = $(window).scrollTop(); var scrollVol = scrollTop + windowHeight - opts.location; //locationはその要素のどれだけ上に来た時に表示するかの値 if(targetOffset <= scrollVol){ target.stop().fadeTo(opts.fadeSpeed , 1 , opts.easing) }; }); }); }); }; })(jQuery);

  • IEのみスクロールイベントで要素がちらつきます

    スクロールイベントで要素を追尾する処理をJavaScriptで記述しました。 他のブラウザでは綺麗に追尾してくれているのですが IE(ver9)だけ要素がちらつきながら追尾します。 スムーズにしたいのですが以下のソースのどこがいけないのでしょうか? 解決方法を教えて下さい。 [HTML] <a id="pageTopButton" href="#">ページ上部へ</a> [CSS] #pageTopButton { width: 100px; position: relative; } [JavaScript(jQuery)] /////初期設定 var viewWindowBottom = $(window).scrollTop() + $(window).height(); $("#pageTopButton").css("top", (viewWindowBottom - ($("#pageTopButton").height())) + "px"); ////画面をスクロール時のイベント $(window).scroll(function(){ var viewWindowBottom = $(window).scrollTop() + $(window).height(); $("#pageTopButton").css("top", (viewWindowBottom - ($("#pageTopButton").height())) + "px"); });

  • スライダーの向きを変える

    以下はスライダーのスクリプトです。この状態だとスライダーの画像は右から左に 流れています。これを左から右に方向を変えたいと思うのですが、javascriptは よくわからないので、それらしきところをleftと書いてあるところをrightにかえたりしたのですが うまくいきません。どこを修正すればいいのでしょうか? //A-yo. ;) $(function(){ $(function(){ // options var options = { duration: 400, easing: 'easeOutCubic', auto: true, interval: 3000 }; // doms var $window = $(window), $container = $('#slider10'), $element = $container.find('ul'), $list = $element.find('li'), $next = $container.find('#next'), $prev = $container.find('#prev'), shift = 2, lw = $list.width(), len = $list.length, timer = ''; var $header = $('#header'), $headerAfter = $header.next(), headerY = $header.height(), containerY = $container.height(); function initialize(){ setup(); $window.on('resize', resize); $next.on('click', function(){ slide(true); }); $prev.on('click', function(){ slide(false); }); $window.on('scroll', scroll); load(); if(options.auto) timer = setInterval(function(){ slide(true) }, options.interval); }; function setup(){ for(var i = shift; i > 0; i--) $element.find('li').eq(len - i).remove().prependTo($element); // div.layerを2つ追加する。 for(var i = 0; i < 2; i++) $('<div class="layer"></div>').insertAfter($element); // 上で追加したdivを変数に入れる $leftlayer = $container.find('.layer').eq(0); $rightlayer = $container.find('.layer').eq(1); // resize関数を呼ぶ resize(); }; function resize(){ var _val = ($window.width() - lw) / 2 - lw * shift; $element.css({ 'width': lw * len, 'left': _val }); $leftlayer.css('left', _val + lw); $rightlayer.css('left', _val + lw * 3); }; // アニメーションを管理する関数 function slide(direction){ // $elementがアニメーション中なら、処理しない if($element.filter(':animated').length) return; // ループを停止 if(options.auto) clearInterval(timer); // 移動を変数に入れる。引数がtrueなら-lw,falseならlw val = (direction)? -lw: lw; // アニメーションスタート。最後にコールバック関数を呼び出す。 $element.animate({ 'marginLeft': val }, options.duration, options.easing, callback); }; // slide関数実行後に呼び出す関数 function callback(){ // valが0より小さければ、最初のliを最後に移動させる。  // valが0より大きければ、最後のliを最初に移動させる。 (0 > val)? $element.find('li').eq(0).remove().appendTo($element): $element.find('li').eq(len - 1).remove().prependTo($element); // valが0より大きければ、最後のliを最初に移動させる。 $element.css('marginLeft', 0); // options.autoがtrueなら、ループを開始 if(options.auto) timer = setInterval(function(){ slide(true) }, options.interval); }; // ヘッダーを固定する関数 function scroll(){ // スクロール量がcontainerYを上回ったら、関数_fixedを実行 // スクロール量がcontainerYを上回ったら、関数_staticを実行 (containerY <= $window.scrollTop())? _fixed() : _static(); function _fixed(){ $header.css({ 'position': 'fixed', 'top': 0, 'left': 0 }); $headerAfter.css('marginTop', headerY); }; function _static(){ $header.css({ 'position': 'static', 'top': '', 'left': '' }); $headerAfter.css('marginTop', ''); }; }; function load(){ var array = [$element, $next, $prev]; for(var i = 0; i < array.length; i++) array[i].css('visibility', 'visible'); $container.css('background', 'none'); }; $window.on('load', initialize); }); })(jQuery);

  • jquery?css?IEで表示されません。

    現在HPを作成していて、ページ内リンクに、jQueryを入れてカレントページにナビゲーションを固定するようにしています。バックに白背景がカレントページのページ内リンクにしています。クロームで確認しても動くのにIEではバックが白にならず困っています。 jQueryとcss、どちらに原因があるのかすら分かりません。 ご回答いただけると幸いです。 jQuery // JavaScript Document $(function(){ var set = 300;//ウインドウ上部からどれぐらいの位置で変化させるか var boxTop = new Array; var current = -1; //各要素の位置 $('.box').each(function(i) { boxTop[i] = $(this).offset().top; }); //最初の要素にclass="on"をつける changeBox(0); //スクロールした時の処理 $(window).scroll(function(){ scrollPosition = $(window).scrollTop(); for (var i = boxTop.length - 1 ; i >= 0; i--) { if ($(window).scrollTop() > boxTop[i] - set) { changeBox(i); break; } }; }); //ナビの処理 function changeBox(secNum) { if (secNum != current) { current = secNum; secNum2 = secNum + 1;//HTML順序用 $('#nav li').removeClass('on'); $('#nav li:nth-child(' + secNum2 +')').addClass('on'); /* 位置によって個別に処理をしたい場合 if (current == 0) { // 現在地がsection1の場合の処理 } else if (current == 1) { // 現在地がsection2の場合の処理 } else if (current == 2) { // 現在地がsection3の場合の処理 }*/ } }; }); css div#nav ul li.on { box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 3px 7px rgba(0, 0, 0, 0.3),0 -3px 2px rgba(0, 0, 0, 0.25) inset; cursor:pointer; background-color:#FFF; color:#ffffff; }

    • ベストアンサー
    • CSS
  • 画像がフェードインしてからフェードアウトする

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> <script src="jquery.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script> $(function(){ var $grid = $('.grid').masonry({ // options itemSelector: 'none', columnWidth: '.grid__item', gutter: 20, stagger: 30, percentPosition: true, visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); var msnry = $grid.data('masonry'); $grid.imagesLoaded(function() { $grid.masonry( 'option', { itemSelector: '.grid__item' }); var $items = $grid.find('.grid__item'); $grid.masonry( 'appended', $items ); }); var nextSlugs = [ 'page2.html', 'page3.html' ]; function getPath() { var slug = nextSlugs[ this.loadCount ]; if( slug ) { return 'https://www.miso.blog/demo/masonry_infinitescroll/'; } } }); </script> </head> <body> <h1>Infinite Scroll - Masonry image grid</h1> <ul class="grid"> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> </ul> </div> <script> $(function(){ $(window).scroll(function (){ $('.fadein').each(function(){ var position = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > position - windowHeight + 200){ $(this).addClass('active'); } }); }); }); </script> </body> </html> ------------------------------------------------------------------------------- @charset "utf-8"; body { font-family: sans-serif; line-height: 1.4; font-size: 18px; padding: 20px; max-width: 640px; margin: 0 auto; } .grid { max-width: 1200px; } /* reveal grid after images loaded */ .grid.are-images-unloaded { opacity: 0; } .grid__item, .grid__col-sizer { width: 27%; } .grid__gutter-sizer { width: 2%; } /* hide by default */ .grid__item { margin-bottom: 20px; float: center; } .grid__item--height1 { height: 140px; background: #EA0; } .grid__item--height2 { height: 220px; background: #C25; } .grid__item--height3 { height: 300px; background: #19F; } .grid-item--width2 { width: 400px; } .grid__item img { display: block; max-width: 100%; } .fadein { opacity : 0; transform : translate(0, 100px); transition : all 1s; } .fadein.active{ opacity : 1; transform : translate(0, 0); } 何故か画像がフェードアウトして表示されません。 やりたい事は、ある一定の位置にスクロールして調整して 画像を読み込んでフェードインさせて表示させたいのですが ご教示お願いします。

    • ベストアンサー
    • HTML
  • jquery 追従メニュー IEについて

    下記jqueryを使って追従メニューを制作した時に、IEで確認すると限りなくスクロールできてしまいます。 解決する方法を検索しましたがわかりませんでした。 どなたかお分かりの方教えてください。 よろしくお願いします。 <script type="text/javascript"> $(function() { var offset = $("#leftcontent2").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#leftcontent2").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#leftcontent2").stop().animate({ marginTop: 0 }); } }); }); </script>

  • cssでコーディング レイアウト重なってしまう

    たすけてください かれこれ数時間<div id>でレイアウトした子たちがいうことをきかずtop=0pxのてっぺんで 重なり作業ができません。positionの設定がいけないのはわかっています。。。 上から順にheader→nav→a→b(c1,c2)→footerです。 jqueryでnavを下にスクロールしていってもwindowの上に表示されるよううごかしたのですが、 navがうごくようになったら他の<div>がきゅっとうえによってしましました。 他のものをposotion:fixedで固定してみたら、今度はmainがくずれ。。。 空が白みはじめたのであきらめましたが配置ができないと次に行けず途方にくれています。 以下にソース書きます。 お願いいたします。 <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <script src="jquery.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ var dy=$(this).scrollTop(); console.log(dy); $("#nav").css("top",150+dy/8); }); }); </script> <body> <div id="wrap"> <div id="header" class="box"></div> <div id="nav" class="box"></div> <div id="a"></div> <div id="b" class="box"> <div class="c_box" id="c1"></div> <div class="c_box" id="c2"></div> </div> <div id="footer"></div> </div> </body> <style type="text/css"> .box { margin:0 auto; width:1260px; position:fixed;} #wrap { weidth:1260px;} #header { height:145px; background:#fcc; } #nav { height:69px; background:#ccc; top:150px; } #a { width:1285px; height:522px; background:#ccf; } #b { height:758px; background:#cff; padding-top:44px; padding-left:24px; position:relative;} .c_box { width:332px; height:328px; border:1px solid #000; padding:6px 15px 20px -25px; } #c1 { position:absolute; left:24px; top:308px; } #c2 { position:absolute; left:465px; top:308px; } #footer { height:100px; background:#fac; } </style>

    • ベストアンサー
    • CSS

専門家に質問してみよう